<!DOCTYPE html>
<!-- saved from url=(0079)http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/ -->
<html class=" js svg inlinesvg svgclippaths" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Essential jQuery Plugin Patterns | Smashing Coding</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta charset="UTF-8">

    <!-- Win8 Tile -->
    <meta name="msapplication-TileImage" content="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/smashing-windows-icon-144-144.png"><meta name="msapplication-TileColor" content="#e63b2c">

    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon-precomposed" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-57x57-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-72x72-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-114x114-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-144x144-precomposed.png">

    <!-- RSS & Pingback -->
    <link rel="alternate" type="application/atom+xml" title="News-Feed" href="http://rss1.smashingmagazine.com/feed/"><link type="application/atom+xml" rel="alternate" title="Smashing Magazine » Coding Feed" href="http://rss1.smashingmagazine.com/feed/?f=coding-std"><link rel="pingback" href="http://coding.smashingmagazine.com/xmlrpc.php">

    <!-- Favicon -->
    <link rel="shortcut icon" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/favicon.ico">
    
    <script src="./Essential jQuery Plugin Patterns   Smashing Coding_files/1125.js" async="" type="text/javascript"></script><script type="text/javascript">var globals = {"wp_home":"http:\/\/mobile.smashingmagazine.com","wp_theme_url":"http:\/\/media.smashingmagazine.com\/wp-content\/themes\/smashingv4","wp_media_uploads_url":"http:\/\/media.smashingmagazine.com\/wp-content\/uploads","wp_www_smash_url":"http:\/\/www.smashingmagazine.com"};</script>

    
<!-- This site is optimized with the Yoast WordPress SEO plugin v1.2.2 - http://yoast.com/wordpress/seo/ -->
<meta name="description" content="jQuery plugin patterns you have to know about. This post is targeted at intermediate to advanced developers.  If you don’t feel you’re ready for this just yet, I’m happy to recommend the official jQuery Plugins/Authoring guide">
<meta name="keywords" content="jQuery, programming, patterns, plugins">
<link rel="canonical" href="./Essential jQuery Plugin Patterns   Smashing Coding_files/Essential jQuery Plugin Patterns   Smashing Coding.htm">
<!-- / Yoast WordPress SEO plugin. -->

<link type="application/atom+xml" rel="alternate" title="Smashing Magazine » Feed" href="http://rss1.smashingmagazine.com/feed/">


<link rel="stylesheet" id="fontdeck-css" href="./Essential jQuery Plugin Patterns   Smashing Coding_files/12777.css" type="text/css" media="screen, print">
<link rel="stylesheet" id="main-css" href="./Essential jQuery Plugin Patterns   Smashing Coding_files/main.min.css" type="text/css" media="all">
<script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/jquery.js"></script>
<script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/popover-load-js.php"></script>
<script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/thirdparty.min.js"></script>
<script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/comment-reply.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var wpAjax = {"noPerm":"You do not have permission to do that.","broken":"An unidentified error has occurred."};
/* ]]> */
</script>
<script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/wp-ajax-response.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var thickboxL10n = {"next":"Next >","prev":"< Prev","image":"Image","of":"of","close":"Close","noiframes":"This feature requires inline frames. You have iframes disabled or your browser does not support them.","loadingAnimation":"http:\/\/coding.smashingmagazine.com\/wp-includes\/js\/thickbox\/loadingAnimation.gif","closeImage":"http:\/\/coding.smashingmagazine.com\/wp-includes\/js\/thickbox\/tb-close.png"};
/* ]]> */
</script>
<script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/thickbox.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var wpajaxeditcomments = {"AEC_PluginUrl":"http:\/\/coding.smashingmagazine.com\/wp-content\/plugins\/smash-edit-comments","AEC_CanScroll":"0","AEC_Minutes":"minutes","AEC_Minute":"minute","AEC_And":"and","AEC_Seconds":"seconds","AEC_Second":"second","AEC_Moderation":"Mark for Moderation?","AEC_Approve":"Approve Comment?","AEC_Spam":"Mark as Spam?","AEC_Delete":"Delete this comment?","AEC_Anon":"Anonymous","AEC_Loading":"Loading...","AEC_Ready":"Ready","AEC_Sending":"Sending...","AEC_Sent":"Message Sent","AEC_LoadSuccessful":"Comment Loaded Successfully","AEC_Saving":"Saving...","AEC_Saved":"Comment Successfully Saved","AEC_Delink":"De-link Successful"};
/* ]]> */
</script>
<script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/wp-ajax-edit-comments.js"></script>

<link rel="shortlink" href="http://coding.smashingmagazine.com/?p=115389">
<link rel="stylesheet" href="./Essential jQuery Plugin Patterns   Smashing Coding_files/edit-comments.css" type="text/css" media="screen"><!-- Ajax Edit Comments -->
<!--[if IE]>
<style>
  .clearfix {display: inline-block;}
  /* Hides from IE-mac \*/
  * html .clearfix {height: 1%;}
  .clearfix {display: block;}
  /* End hide from IE-mac */
</style>
<![endif]-->
<link rel="stylesheet" href="./Essential jQuery Plugin Patterns   Smashing Coding_files/thickbox.css" type="text/css" media="all">
    <!--[if IE 8]><link rel="stylesheet" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/stylesheets/ie8.css" /><![endif]-->

    <script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/spcjs.php"></script><script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/spc.php"></script><script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/fl.js"></script>

    <script type="text/javascript">/* <![CDATA[ */  ads_postload();   /* ]]> */</script>

<script type="text/javascript" async="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/in.php"></script><style type="text/css">undefined</style><script type="text/javascript" async="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/in(1).php"></script><script type="text/javascript" async="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/in(2).php"></script><script type="text/javascript" async="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/in(3).php"></script><script type="text/javascript" async="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/in(4).php"></script><script type="text/javascript" async="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/in(5).php"></script><script type="text/javascript" async="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/in(6).php"></script></head>
<body class="single single-post postid-115389 single-format-standard coding-section">

	<a id="top"></a>
        <nav class="toplevel clearfix">
            <div class="mini">
                <h1><span class="screen-reader">Smashing Magazine</span><a href="http://www.smashingmagazine.com/" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/logo.png" alt="Smashing Magazine" title="Jump to the front page"></a></h1>
            </div>

            <div class="mobile-nav-buttons">
                <a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#mobile-navigation" class="nav-toggle-button">Menu</a> <a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#mobile-search" class="search-toggle-button">Search</a>
            </div>

            <div class="searching-on-mobile-device" id="mobile-search">

                <a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#top" class="close-that-search">×</a>

                <form id="searching" class="search-for-mobile" method="get" action="http://www.smashingmagazine.com/search-results/" target="_top">
                    <div class="clearfix">
                        <input name="q" id="mobile-search-input" type="text" placeholder="e.g. CSS">
                        <button class="search_submit" type="submit">Search</button>
                        <input type="hidden" name="cx" value="partner-pub-6779860845561969:5884617103">
                        <input type="hidden" name="cof" value="FORID:10">
                        <input type="hidden" name="ie" value="UTF-8">
                    </div>
                </form>

            </div> <!-- Search form -->

            <div class="toggle-nav" id="mobile-navigation">

                <a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#top" class="close-that-nav">×</a>

                <ul class="mobile-nav-ul">
                    <li class="mobile-nav-heading">Smashing Pages:</li>
                    <li><a href="http://www.smashingmagazine.com/books/">Smashing Books</a></li>
                    <li><a href="http://www.smashingmagazine.com/ebooks/">Smashing Library</a></li>
                    <li><a href="https://shop.smashingmagazine.com/workshops/">Smashing Events</a></li>
                    <li><a href="http://jobs.smashingmagazine.com/">Job Board</a></li>
                </ul>
                <ul class="mobile-nav-ul">
                    <li class="mobile-nav-heading">Categories:</li>
                    <li><a href="http://coding.smashingmagazine.com/">Coding</a></li>
                    <li><a href="http://www.smashingmagazine.com/category/design/">Design</a></li>
                    <li><a href="http://mobile.smashingmagazine.com/">Mobile</a></li>
                    <li><a href="http://www.smashingmagazine.com/category/graphics/">Graphics</a></li>
                    <li><a href="http://uxdesign.smashingmagazine.com/">UX Design</a></li>
                    <li><a href="http://wp.smashingmagazine.com/">WordPress</a></li>
                </ul>
            </div> <!-- Mobile Nav uls -->

            <ul class="network clearfix">           
                <li class="current"><a href="http://www.smashingmagazine.com/" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/logo.png" alt="Smashing Magazine" title="Jump to the front page"></a></li>
                <li><a href="http://www.smashingmagazine.com/books/">Books</a></li>
                <li><a href="http://www.smashingmagazine.com/ebooks/">Library</a><a href="http://www.smashingmagazine.com/ebooks/" id="naviebookslink" style="border: none;"><img id="littleebooksimage" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/navilittlebook.png" alt="Smashing Library"></a></li>
                <li><a href="https://shop.smashingmagazine.com/workshops/">Workshops</a></li>
                <li><a href="http://jobs.smashingmagazine.com/">Job Board</a></li>
            </ul>

            <ul class="channels">
                <li class="rss"><a href="http://rss1.smashingmagazine.com/feed/" title="Subscribe to our RSS-feed (1100K)">RSS</a></li>
                <li class="facebook"><a href="http://www.facebook.com/smashmag" title="Join our Facebook page! (99k)">Facebook</a></li>
                <li class="twitter"><a href="http://twitter.com/smashingmag" title="Follow us on Twitter! (612K)">Twitter</a></li>
                <li class="newsletter"><a href="http://www.smashingmagazine.com/the-smashing-newsletter/" title="Subscribe to our Email Newsletter (107K)">Newsletter</a></li>
            </ul>
        </nav>

<div id="container">
    <div class="fluid clearfix">
        <div class="grid clearfix">
            <div class="mini-search wp-search-form clearfix">           
                <form id="search" method="get" action="http://www.smashingmagazine.com/search-results/" target="_top">
                    <input name="q" type="text" placeholder="e.g. JavaScript">
                    <button class="search_submit" type="submit"><span class="first-type">Search</span></button>
                    <input type="hidden" name="cx" value="partner-pub-6779860845561969:5884617103">
                    <input type="hidden" name="cof" value="FORID:10">
                    <input type="hidden" name="ie" value="UTF-8">
                </form>
            </div>
            <div class="col sidebar">
                <nav class="sections">
                <ul class="clearfix">
                    <li class="coding current">
                        <a href="http://coding.smashingmagazine.com/">Coding</a>
                        <ul>
                            <li><a href="http://coding.smashingmagazine.com/tag/css/">CSS</a></li>
                            <li><a href="http://coding.smashingmagazine.com/tag/html/">HTML</a></li>
                            <li><a href="http://coding.smashingmagazine.com/tag/javascript/">JavaScript</a></li>
                            <li><a href="http://coding.smashingmagazine.com/tag/techniques/">Techniques</a></li>
                        </ul>
                    </li>
                    <li class="design">
                        <a href="http://www.smashingmagazine.com/category/design/">Design</a>
                        <ul>
                            <li><a href="http://www.smashingmagazine.com/tag/web-design/">Web Design</a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/typography/">Typography</a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/inspiration/">Inspiration</a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/business/">Business</a></li>
                        </ul>
                    </li>
                    <li class="community">
                        <a href="http://mobile.smashingmagazine.com/">Mobile</a>
                        <ul>
                            <li><a href="http://mobile.smashingmagazine.com/tag/responsive-design/">Responsive</a></li>
                            <li><a href="http://mobile.smashingmagazine.com/tag/ios/">iPhone &amp; iPad</a></li>
                            <li><a href="http://mobile.smashingmagazine.com/tag/android/">Android</a></li>
                            <li><a href="http://mobile.smashingmagazine.com/tag/design-patterns/">Design Patterns</a></li>
                        </ul>
                    </li>
                    <li class="graphics">
                        <a href="http://www.smashingmagazine.com/category/graphics/">Graphics</a>
                        <ul>
                            <li><a href="http://www.smashingmagazine.com/tag/photoshop/">Photoshop</a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/illustrator/">Illustrator</a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/wallpapers/">Wallpapers</a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/freebies/">Freebies</a></li>
                        </ul>
                    </li>
                    <li class="ux">
                        <a href="http://uxdesign.smashingmagazine.com/">UX Design</a>
                        <ul>
                            <li><a href="http://uxdesign.smashingmagazine.com/tag/usability/">Usability</a></li>
                            <li><a href="http://uxdesign.smashingmagazine.com/tag/user-experience/">User Experience</a></li>
                            <li><a href="http://uxdesign.smashingmagazine.com/tag/ui/">UI Design</a></li>
                            <li><a href="http://uxdesign.smashingmagazine.com/tag/e-commerce/">E-Commerce</a></li>
                        </ul>
                    </li>
                    <li class="wordpress">
                        <a href="http://wp.smashingmagazine.com/" class="clearfix"><span class="short">WP</span><span class="long"><span>Word</span><span>Press</span></span></a>
                        <ul>
                            <li><a href="http://wp.smashingmagazine.com/tag/essentials/">Essentials</a></li>
                            <li><a href="http://wp.smashingmagazine.com/tag/techniques/">Techniques</a></li>
                            <li><a href="http://wp.smashingmagazine.com/tag/plugins/">Plugins</a></li>
                            <li><a href="http://wp.smashingmagazine.com/tag/themes/">Themes</a></li>
                        </ul>
                    </li>
                </ul>
                <br class="nasty">
            </nav>
        </div><!-- .col.sidebar -->
        <div class="col main single">
    <article class="post-115389 post type-post status-publish format-standard hentry category-jquery tag-jquery post">
                    <h2><a href="./Essential jQuery Plugin Patterns   Smashing Coding_files/Essential jQuery Plugin Patterns   Smashing Coding.htm" rel="bookmark" title="Read &#39;Essential jQuery Plugin Patterns&#39;">Essential jQuery Plugin Patterns</a></h2>
                <ul class="postmetadata clearfix">
            <li class="author">By <a rel="author" href="http://coding.smashingmagazine.com/author/addy-osmani/?rel=author" title="Posts by Addy Osmani">Addy Osmani</a><sup class="print_only"> 1</sup></li>
            <li id="logoedtarget" class="inline"></li>            <li class="date">October 11th, 2011</li>
            <li class="tags"><a href="http://coding.smashingmagazine.com/tag/jquery/">JQuery</a><sup class="print_only"> 2</sup></li>
            <li class="comments"><a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comments" title="Comment on Essential jQuery Plugin Patterns">51 Comments</a></li>
                    </ul>
                <div class="ad ed">
            <span class="declare">Advertisement</span>
            <div id="cad">
                <script type="text/javascript">// <![CDATA[
                    OA_show('Medium Rectangle');
                // ]]> </script><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5987__zoneid=22__OXLCA=1__cb=a25ba95d4d__oadest=http%3A%2F%2Fwww.infragistics.com%2Figniteui-download%3Futm_source%3DSmashing%2B%26utm_medium%3Dbanner%26utm_content%3D300x250%26utm_campaign%3Djquery" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai.php" alt="" title="" border="0"></a><div id="beacon_a25ba95d4d" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg.php" alt="" style="width: 0px; height: 0px;"></div>

            </div>
        </div>
                                    <p>I occasionally write about implementing <a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/">design patterns</a> in JavaScript. They’re an excellent way of building upon proven approaches to solving common development problems, and I think there’s a lot of benefit to using them. But while well-known JavaScript patterns are useful, another side of development could benefit from its own set of design patterns: jQuery plugins. The official jQuery <a href="http://docs.jquery.com/Plugins/Authoring">plugin authoring guide</a> offers a great starting point for getting into writing plugins and widgets, but let’s take it further.</p>
<p>Plugin development has evolved over the past few years. We no longer have just one way to write plugins, but many. In reality, certain patterns might work better for a particular problem or component than others.</p>
<p>Some developers may wish to use the jQuery UI <a href="http://ajpiano.com/widgetfactory/">widget factory</a>; it’s great for complex, flexible UI components. Some may not. Some might like to structure their plugins more like modules (similar to the module pattern) or use a more formal module format such as <a href="https://github.com/amdjs/amdjs-api/wiki/AMD">AMD (asynchronous module definition)</a>. Some might want their plugins to harness the power of prototypal inheritance. Some might want to use custom events or pub/sub to communicate from plugins to the rest of their app. And so on.</p>
<p>I began to think about plugin patterns after noticing a number of efforts to create a one-size-fits-all jQuery plugin boilerplate. While such a boilerplate is a great idea in theory, the reality is that we rarely write plugins in one fixed way, using a single pattern all the time.</p>
<p>Let’s assume that you’ve tried your hand at writing your own jQuery plugins at some point and you’re comfortable putting together something that works. It’s functional. It does what it needs to do, but perhaps you feel it could be structured better. Maybe it could be more flexible or could solve more issues. If this sounds familiar and you aren’t sure of the differences between many of the different jQuery plugin patterns, then you might find what I have to say helpful.</p>
<p>My advice won’t provide solutions to every possible pattern, but it will cover popular patterns that developers use in the wild.</p>
<p><strong>Note:</strong> This post is targeted at intermediate to advanced developers. If you don’t feel you’re ready for this just yet, I’m happy to recommend the official jQuery <a href="http://docs.jquery.com/Plugins/Authoring">Plugins/Authoring</a> guide, Ben Alman’s <a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff696759">plugin style guide</a> and Remy Sharp’s “<a href="http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/">Signs of a Poorly Written jQuery Plugin</a>.”</p>
<h3>Patterns</h3>
<p>jQuery plugins have very few defined rules, which one of the reasons for the incredible diversity in how they’re implemented. At the most basic level, you can write a plugin simply by adding a new function property to jQuery’s <code>$.fn</code> object, as follows:</p>
<pre class=" language-javascript"><code class=" language-javascript">$<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>myPluginName <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token comment" spellcheck="true"> // your plugin logic
</span><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>This is great for compactness, but the following would be a better foundation to build on:</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span> $ <span class="token punctuation">)</span><span class="token punctuation">{</span>
  $<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>myPluginName <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token comment" spellcheck="true"> // your plugin logic
</span>  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span> jQuery <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Here, we’ve wrapped our plugin logic in an anonymous function. To ensure that our use of the <code>$</code> sign as a shorthand creates no conflicts between jQuery and other JavaScript libraries, we simply pass it to this closure, which maps it to the dollar sign, thus ensuring that it can’t be affected by anything outside of its scope of execution.</p>
<p>An alternative way to write this pattern would be to use <code>$.extend</code>, which enables you to define multiple functions at once and which sometimes make more sense semantically:</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span> $ <span class="token punctuation">)</span><span class="token punctuation">{</span>
    $<span class="token punctuation">.</span><span class="token function">extend<span class="token punctuation">(</span></span>$<span class="token punctuation">.</span>fn<span class="token punctuation">,</span> <span class="token punctuation">{</span>
        myplugin<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
           <span class="token comment" spellcheck="true"> // your plugin logic
</span>        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span> jQuery <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>We could do a lot more to improve on all of this; and the first complete pattern we’ll be looking at today, the lightweight pattern, covers some best practices that we can use for basic everyday plugin development and that takes into account common gotchas to look out for.</p>
<h4>Some Quick Notes</h4>
<p>You can find all of the patterns from this post in this <a href="https://github.com/addyosmani/jquery-plugin-patterns/">GitHub repository</a>.</p>
<p>While most of the patterns below will be explained, I recommend reading through the comments in the code, because they will offer more insight into why certain practices are best. </p>
<p>I should also mention that none of this would be possible without the previous work, input and advice of other members of the jQuery community. I’ve listed them inline with each pattern so that you can read up on their individual work if interested.</p>
<h3>A Lightweight Start</h3>
<p>Let’s begin our look at patterns with something basic that follows best practices (including those in the jQuery plugin-authoring guide). This pattern is ideal for developers who are either new to plugin development or who just want to achieve something simple (such as a utility plugin). This lightweight start uses the following:</p>
<ul>
<li>Common best practices, such as a semi-colon before the function’s invocation; <code>window, document, undefined</code> passed in as arguments; and adherence to the jQuery core style guidelines.</li>
<li>A basic defaults object.</li>
<li>A simple plugin constructor for logic related to the initial creation and the assignment of the element to work with.</li>
<li>Extending the options with defaults.</li>
<li>A lightweight wrapper around the constructor, which helps to avoid issues such as multiple instantiations.</li>
</ul>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">/*!
 * jQuery lightweight plugin boilerplate
 * Original author: @ajpiano
 * Further changes, comments: @addyosmani
 * Licensed under the MIT license
 */</span>

<span class="token comment" spellcheck="true">
// the semi-colon before the function invocation is a safety 
</span><span class="token comment" spellcheck="true">// net against concatenated scripts and/or other plugins 
</span><span class="token comment" spellcheck="true">// that are not closed properly.
</span><span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span> $<span class="token punctuation">,</span> window<span class="token punctuation">,</span> document<span class="token punctuation">,</span> undefined <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    
   <span class="token comment" spellcheck="true"> // undefined is used here as the undefined global 
</span>   <span class="token comment" spellcheck="true"> // variable in ECMAScript 3 and is mutable (i.e. it can 
</span>   <span class="token comment" spellcheck="true"> // be changed by someone else). undefined isn't really 
</span>   <span class="token comment" spellcheck="true"> // being passed in so we can ensure that its value is 
</span>   <span class="token comment" spellcheck="true"> // truly undefined. In ES5, undefined can no longer be 
</span>   <span class="token comment" spellcheck="true"> // modified.
</span>    
   <span class="token comment" spellcheck="true"> // window and document are passed through as local 
</span>   <span class="token comment" spellcheck="true"> // variables rather than as globals, because this (slightly) 
</span>   <span class="token comment" spellcheck="true"> // quickens the resolution process and can be more 
</span>   <span class="token comment" spellcheck="true"> // efficiently minified (especially when both are 
</span>   <span class="token comment" spellcheck="true"> // regularly referenced in your plugin).
</span>
   <span class="token comment" spellcheck="true"> // Create the defaults once
</span>    <span class="token keyword">var</span> pluginName <span class="token operator">=</span> <span class="token string">'defaultPluginName'</span><span class="token punctuation">,</span>
        defaults <span class="token operator">=</span> <span class="token punctuation">{</span>
            propertyName<span class="token punctuation">:</span> <span class="token string">"value"</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>

   <span class="token comment" spellcheck="true"> // The actual plugin constructor
</span>    <span class="token keyword">function</span> <span class="token function">Plugin<span class="token punctuation">(</span></span> element<span class="token punctuation">,</span> options <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        this<span class="token punctuation">.</span>element <span class="token operator">=</span> element<span class="token punctuation">;</span>

       <span class="token comment" spellcheck="true"> // jQuery has an extend method that merges the 
</span>       <span class="token comment" spellcheck="true"> // contents of two or more objects, storing the 
</span>       <span class="token comment" spellcheck="true"> // result in the first object. The first object 
</span>       <span class="token comment" spellcheck="true"> // is generally empty because we don't want to alter 
</span>       <span class="token comment" spellcheck="true"> // the default options for future instances of the plugin
</span>        this<span class="token punctuation">.</span>options <span class="token operator">=</span> $<span class="token punctuation">.</span><span class="token function">extend<span class="token punctuation">(</span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> defaults<span class="token punctuation">,</span> options<span class="token punctuation">)</span> <span class="token punctuation">;</span>
        
        this<span class="token punctuation">.</span>_defaults <span class="token operator">=</span> defaults<span class="token punctuation">;</span>
        this<span class="token punctuation">.</span>_name <span class="token operator">=</span> pluginName<span class="token punctuation">;</span>
        
        this<span class="token punctuation">.</span><span class="token function">init<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    Plugin<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>init <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token comment" spellcheck="true"> // Place initialization logic here
</span>       <span class="token comment" spellcheck="true"> // You already have access to the DOM element and
</span>       <span class="token comment" spellcheck="true"> // the options via the instance, e.g. this.element 
</span>       <span class="token comment" spellcheck="true"> // and this.options
</span>    <span class="token punctuation">}</span><span class="token punctuation">;</span>

   <span class="token comment" spellcheck="true"> // A really lightweight plugin wrapper around the constructor, 
</span>   <span class="token comment" spellcheck="true"> // preventing against multiple instantiations
</span>    $<span class="token punctuation">.</span>fn<span class="token punctuation">[</span>pluginName<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> options <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> this<span class="token punctuation">.</span><span class="token function">each<span class="token punctuation">(</span></span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>$<span class="token punctuation">.</span><span class="token function">data<span class="token punctuation">(</span></span>this<span class="token punctuation">,</span> <span class="token string">'plugin_'</span> <span class="token operator">+</span> pluginName<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                $<span class="token punctuation">.</span><span class="token function">data<span class="token punctuation">(</span></span>this<span class="token punctuation">,</span> <span class="token string">'plugin_'</span> <span class="token operator">+</span> pluginName<span class="token punctuation">,</span> 
                <span class="token keyword">new</span> <span class="token class-name">Plugin</span><span class="token punctuation">(</span> this<span class="token punctuation">,</span> options <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span> jQuery<span class="token punctuation">,</span> window<span class="token punctuation">,</span> document <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h4>Further Reading</h4>
<ul>
<li><a href="http://docs.jquery.com/Plugins/Authoring">Plugins/Authoring</a><sup class="print_only"> 3</sup>, jQuery</li>
<li>“<a href="http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/">Signs of a Poorly Written jQuery Plugin</a><sup class="print_only"> 4</sup>,” Remy Sharp</li>
<li>“<a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff608209">How to Create Your Own jQuery Plugin</a><sup class="print_only"> 5</sup>,” Elijah Manor</li>
<li>“<a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff696759">Style in jQuery Plugins and Why It Matters</a><sup class="print_only"> 6</sup>,” Ben Almon</li>
<li>“<a href="http://enterprisejquery.com/2010/07/create-your-first-jquery-plugin-part-2-revising-your-plugin/">Create Your First jQuery Plugin, Part 2</a><sup class="print_only"> 7</sup>,” Andrew Wirick</li>
</ul>
<h3>“Complete” Widget Factory</h3>
<p>While the authoring guide is a great introduction to plugin development, it doesn’t offer a great number of conveniences for obscuring away from common plumbing tasks that we have to deal with on a regular basis.</p>
<p>The jQuery UI Widget Factory is a solution to this problem that helps you build complex, stateful plugins based on object-oriented principles. It also eases communication with your plugin’s instance, obfuscating a number of the repetitive tasks that you would have to code when working with basic plugins.</p>
<p>In case you haven’t come across these before, stateful plugins keep track of their current state, also allowing you to change properties of the plugin after it has been initialized.</p>
<p>One of the great things about the Widget Factory is that the majority of the jQuery UI library actually uses it as a base for its components. This means that if you’re looking for further guidance on structure beyond this template, you won’t have to look beyond the jQuery UI repository.</p>
<p>Back to patterns. This jQuery UI boilerplate does the following:</p>
<ul>
<li>Covers almost all supported default methods, including triggering events.</li>
<li>Includes comments for all of the methods used, so that you’re never unsure of where logic should fit in your plugin.</li>
</ul>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">/*!
 * jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
 * Author: @addyosmani
 * Further changes: @peolanha
 * Licensed under the MIT license
 */</span>


<span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span> $<span class="token punctuation">,</span> window<span class="token punctuation">,</span> document<span class="token punctuation">,</span> undefined <span class="token punctuation">)</span> <span class="token punctuation">{</span>

   <span class="token comment" spellcheck="true"> // define your widget under a namespace of your choice
</span>   <span class="token comment" spellcheck="true"> //  with additional parameters e.g. 
</span>   <span class="token comment" spellcheck="true"> // $.widget( "namespace.widgetname", (optional) - an 
</span>   <span class="token comment" spellcheck="true"> // existing widget prototype to inherit from, an object 
</span>   <span class="token comment" spellcheck="true"> // literal to become the widget's prototype ); 
</span>
    $<span class="token punctuation">.</span><span class="token function">widget<span class="token punctuation">(</span></span> <span class="token string">"namespace.widgetname"</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span>

       <span class="token comment" spellcheck="true"> //Options to be used as defaults
</span>        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            someValue<span class="token punctuation">:</span> <span class="token keyword">null</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>

       <span class="token comment" spellcheck="true"> //Setup widget (eg. element creation, apply theming
</span>       <span class="token comment" spellcheck="true"> // , bind events etc.)
</span>        _create<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

           <span class="token comment" spellcheck="true"> // _create will automatically run the first time 
</span>           <span class="token comment" spellcheck="true"> // this widget is called. Put the initial widget 
</span>           <span class="token comment" spellcheck="true"> // setup code here, then you can access the element 
</span>           <span class="token comment" spellcheck="true"> // on which the widget was called via this.element. 
</span>           <span class="token comment" spellcheck="true"> // The options defined above can be accessed 
</span>           <span class="token comment" spellcheck="true"> // via this.options this.element.addStuff();
</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>

       <span class="token comment" spellcheck="true"> // Destroy an instantiated plugin and clean up 
</span>       <span class="token comment" spellcheck="true"> // modifications the widget has made to the DOM
</span>        destroy<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

           <span class="token comment" spellcheck="true"> // this.element.removeStuff();
</span>           <span class="token comment" spellcheck="true"> // For UI 1.8, destroy must be invoked from the 
</span>           <span class="token comment" spellcheck="true"> // base widget
</span>            $<span class="token punctuation">.</span>Widget<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>destroy<span class="token punctuation">.</span><span class="token function">call<span class="token punctuation">(</span></span>this<span class="token punctuation">)</span><span class="token punctuation">;</span>
           <span class="token comment" spellcheck="true"> // For UI 1.9, define _destroy instead and don't 
</span>           <span class="token comment" spellcheck="true"> // worry about 
</span>           <span class="token comment" spellcheck="true"> // calling the base widget
</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>

        methodB<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span>
           <span class="token comment" spellcheck="true"> //_trigger dispatches callbacks the plugin user 
</span>           <span class="token comment" spellcheck="true"> // can subscribe to
</span>           <span class="token comment" spellcheck="true"> // signature: _trigger( "callbackName" , [eventObject], 
</span>           <span class="token comment" spellcheck="true"> // [uiObject] )
</span>           <span class="token comment" spellcheck="true"> // eg. this._trigger( "hover", e /*where e.type == 
</span>           <span class="token comment" spellcheck="true"> // "mouseenter"*/, { hovered: $(e.target)});
</span>            this<span class="token punctuation">.</span><span class="token function">_trigger<span class="token punctuation">(</span></span><span class="token string">'methodA'</span><span class="token punctuation">,</span> event<span class="token punctuation">,</span> <span class="token punctuation">{</span>
                key<span class="token punctuation">:</span> value
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>

        methodA<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            this<span class="token punctuation">.</span><span class="token function">_trigger<span class="token punctuation">(</span></span><span class="token string">'dataChanged'</span><span class="token punctuation">,</span> event<span class="token punctuation">,</span> <span class="token punctuation">{</span>
                key<span class="token punctuation">:</span> value
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>

       <span class="token comment" spellcheck="true"> // Respond to any changes the user makes to the 
</span>       <span class="token comment" spellcheck="true"> // option method
</span>        _setOption<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> key<span class="token punctuation">,</span> value <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            switch <span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            case <span class="token string">"someValue"</span><span class="token punctuation">:</span>
               <span class="token comment" spellcheck="true"> //this.options.someValue = doSomethingWith( value );
</span>                <span class="token keyword">break</span><span class="token punctuation">;</span>
            default<span class="token punctuation">:</span>
               <span class="token comment" spellcheck="true"> //this.options[ key ] = value;
</span>                <span class="token keyword">break</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

           <span class="token comment" spellcheck="true"> // For UI 1.8, _setOption must be manually invoked 
</span>           <span class="token comment" spellcheck="true"> // from the base widget
</span>            $<span class="token punctuation">.</span>Widget<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>_setOption<span class="token punctuation">.</span><span class="token function">apply<span class="token punctuation">(</span></span> this<span class="token punctuation">,</span> arguments <span class="token punctuation">)</span><span class="token punctuation">;</span>
           <span class="token comment" spellcheck="true"> // For UI 1.9 the _super method can be used instead
</span>           <span class="token comment" spellcheck="true"> // this._super( "_setOption", key, value );
</span>        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span> jQuery<span class="token punctuation">,</span> window<span class="token punctuation">,</span> document <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h4>Further Reading</h4>
<ul>
<li><a href="http://ajpiano.com/widgetfactory/#slide1">The jQuery UI Widget Factory</a><sup class="print_only"> 8</sup></li>
<li>“<a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff706600">Introduction to Stateful Plugins and the Widget Factory</a><sup class="print_only"> 9</sup>,” Doug Neiner</li>
<li>“<a href="http://wiki.jqueryui.com/w/page/12138135/Widget%20factory">Widget Factory</a><sup class="print_only"> 10</sup>” (explained), Scott Gonzalez</li>
<li>“<a href="http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/">Understanding jQuery UI Widgets: A Tutorial</a><sup class="print_only"> 11</sup>,” Hacking at 0300</li>
</ul>
<h3>Namespacing And Nested Namespacing</h3>
<p>Namespacing your code is a way to avoid collisions with other objects and variables in the global namespace. They’re important because you want to safeguard your plugin from breaking in the event that another script on the page uses the same variable or plugin names as yours. As a good citizen of the global namespace, you must also do your best not to prevent other developers’ scripts from executing because of the same issues.</p>
<p>JavaScript doesn’t really have built-in support for namespaces as other languages do, but it does have objects that can be used to achieve a similar effect. Employing a top-level object as the name of your namespace, you can easily check for the existence of another object on the page with the same name. If such an object does not exist, then we define it; if it does exist, then we simply extend it with our plugin.</p>
<p>Objects (or, rather, object literals) can be used to create nested namespaces, such as <code>namespace.subnamespace.pluginName</code> and so on. But to keep things simple, the namespacing boilerplate below should give you everything you need to get started with these concepts.</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">/*!
 * jQuery namespaced 'Starter' plugin boilerplate
 * Author: @dougneiner
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */</span>

<span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span> $ <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>$<span class="token punctuation">.</span>myNamespace<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        $<span class="token punctuation">.</span>myNamespace <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    $<span class="token punctuation">.</span>myNamespace<span class="token punctuation">.</span>myPluginName <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> el<span class="token punctuation">,</span> myFunctionParam<span class="token punctuation">,</span> options <span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token comment" spellcheck="true"> // To avoid scope issues, use 'base' instead of 'this'
</span>       <span class="token comment" spellcheck="true"> // to reference this class from internal events and functions.
</span>        <span class="token keyword">var</span> base <span class="token operator">=</span> this<span class="token punctuation">;</span>

       <span class="token comment" spellcheck="true"> // Access to jQuery and DOM versions of element
</span>        base<span class="token punctuation">.</span>$el <span class="token operator">=</span> $<span class="token punctuation">(</span>el<span class="token punctuation">)</span><span class="token punctuation">;</span>
        base<span class="token punctuation">.</span>el <span class="token operator">=</span> el<span class="token punctuation">;</span>

       <span class="token comment" spellcheck="true"> // Add a reverse reference to the DOM object
</span>        base<span class="token punctuation">.</span>$el<span class="token punctuation">.</span><span class="token function">data<span class="token punctuation">(</span></span> <span class="token string">"myNamespace.myPluginName"</span> <span class="token punctuation">,</span> base <span class="token punctuation">)</span><span class="token punctuation">;</span>

        base<span class="token punctuation">.</span>init <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            base<span class="token punctuation">.</span>myFunctionParam <span class="token operator">=</span> myFunctionParam<span class="token punctuation">;</span>

            base<span class="token punctuation">.</span>options <span class="token operator">=</span> $<span class="token punctuation">.</span><span class="token function">extend<span class="token punctuation">(</span></span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> 
            $<span class="token punctuation">.</span>myNamespace<span class="token punctuation">.</span>myPluginName<span class="token punctuation">.</span>defaultOptions<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span>

           <span class="token comment" spellcheck="true"> // Put your initialization code here
</span>        <span class="token punctuation">}</span><span class="token punctuation">;</span>

       <span class="token comment" spellcheck="true"> // Sample Function, Uncomment to use
</span>       <span class="token comment" spellcheck="true"> // base.functionName = function( paramaters ){
</span>       <span class="token comment" spellcheck="true"> // 
</span>       <span class="token comment" spellcheck="true"> // };
</span>       <span class="token comment" spellcheck="true"> // Run initializer
</span>        base<span class="token punctuation">.</span><span class="token function">init<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    $<span class="token punctuation">.</span>myNamespace<span class="token punctuation">.</span>myPluginName<span class="token punctuation">.</span>defaultOptions <span class="token operator">=</span> <span class="token punctuation">{</span>
        myDefaultValue<span class="token punctuation">:</span> <span class="token string">""</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    $<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>mynamespace_myPluginName <span class="token operator">=</span> <span class="token keyword">function</span> 
        <span class="token punctuation">(</span> myFunctionParam<span class="token punctuation">,</span> options <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> this<span class="token punctuation">.</span><span class="token function">each<span class="token punctuation">(</span></span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token punctuation">(</span><span class="token keyword">new</span> $<span class="token punctuation">.</span>myNamespace<span class="token punctuation">.</span><span class="token function">myPluginName<span class="token punctuation">(</span></span>this<span class="token punctuation">,</span> 
            myFunctionParam<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span> jQuery <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h4>Further Reading</h4>
<ul>
<li>“<a href="http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/">Namespacing in JavaScript</a><sup class="print_only"> 12</sup>,” Angus Croll</li>
<li>“<a href="http://ryanflorence.com/use-your-fn-jquery-namespace/">Use Your $.fn jQuery Namespace</a><sup class="print_only"> 13</sup>,” Ryan Florence</li>
<li>“<a href="http://michaux.ca/articles/javascript-namespacing">JavaScript Namespacing</a><sup class="print_only"> 14</sup>,” Peter Michaux</li>
<li>“<a href="http://www.2ality.com/2011/04/modules-and-namespaces-in-javascript.html">Modules and namespaces in JavaScript</a><sup class="print_only"> 15</sup>,” Axel Rauschmayer</li>
</ul>
<h3>Custom Events For Pub/Sub (With The Widget factory)</h3>
<p>You may have used the Observer (Pub/Sub) pattern in the past to develop asynchronous JavaScript applications. The basic idea here is that elements will publish event notifications when something interesting occurs in your application. Other elements then subscribe to or listen for these events and respond accordingly. This results in the logic for your application being significantly more decoupled (which is always good).</p>
<p>In jQuery, we have this idea that custom events provide a built-in means to implement a publish and subscribe system that’s quite similar to the Observer pattern. So, <code>bind('eventType')</code> is functionally equivalent to performing <code>subscribe('eventType')</code>, and <code>trigger('eventType')</code> is roughly equivalent to <code>publish('eventType')</code>.</p>
<p>Some developers might consider the jQuery event system as having too much overhead to be used as a publish and subscribe system, but it’s been architected to be both reliable and robust for most use cases. In the following jQuery UI widget factory template, we’ll implement a basic custom event-based pub/sub pattern that allows our plugin to subscribe to event notifications from the rest of our application, which publishes them.</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">/*!
 * jQuery custom-events plugin boilerplate
 * Author: DevPatch
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */</span>
<span class="token comment" spellcheck="true">
// In this pattern, we use jQuery's custom events to add 
</span><span class="token comment" spellcheck="true">// pub/sub (publish/subscribe) capabilities to widgets. 
</span><span class="token comment" spellcheck="true">// Each widget would publish certain events and subscribe 
</span><span class="token comment" spellcheck="true">// to others. This approach effectively helps to decouple 
</span><span class="token comment" spellcheck="true">// the widgets and enables them to function independently.
</span>
<span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span> $<span class="token punctuation">,</span> window<span class="token punctuation">,</span> document<span class="token punctuation">,</span> undefined <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    $<span class="token punctuation">.</span><span class="token function">widget<span class="token punctuation">(</span></span><span class="token string">"ao.eventStatus"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>

        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        
        _create <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> self <span class="token operator">=</span> this<span class="token punctuation">;</span>

           <span class="token comment" spellcheck="true"> //self.element.addClass( "my-widget" );
</span>
           <span class="token comment" spellcheck="true"> //subscribe to 'myEventStart'
</span>            self<span class="token punctuation">.</span>element<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span> <span class="token string">"myEventStart"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> e <span class="token punctuation">)</span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">"event start"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

           <span class="token comment" spellcheck="true"> //subscribe to 'myEventEnd'
</span>            self<span class="token punctuation">.</span>element<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span> <span class="token string">"myEventEnd"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> e <span class="token punctuation">)</span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">"event end"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

           <span class="token comment" spellcheck="true"> //unsubscribe to 'myEventStart'
</span>           <span class="token comment" spellcheck="true"> //self.element.unbind( "myEventStart", function(e){
</span>               <span class="token comment" spellcheck="true"> ///console.log("unsubscribed to this event"); 
</span>           <span class="token comment" spellcheck="true"> //});
</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>

        destroy<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            $<span class="token punctuation">.</span>Widget<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>destroy<span class="token punctuation">.</span><span class="token function">apply<span class="token punctuation">(</span></span> this<span class="token punctuation">,</span> arguments <span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span> jQuery<span class="token punctuation">,</span> window <span class="token punctuation">,</span> document <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
//Publishing event notifications
</span><span class="token comment" spellcheck="true">//usage: 
</span><span class="token comment" spellcheck="true">// $(".my-widget").trigger("myEventStart");
</span><span class="token comment" spellcheck="true">// $(".my-widget").trigger("myEventEnd");</span></code></pre>
<h4>Further Reading</h4>
<ul>
<li>“<a href="http://www.devpatch.com/2010/03/communication-between-jquery-ui-widgets/">Communication Between jQuery UI Widgets</a><sup class="print_only"> 16</sup>,” Benjamin Sternthal</li>
<li>“<a href="http://msdn.microsoft.com/en-us/scriptjunkie/hh201955.aspx">Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability</a><sup class="print_only"> 17</sup>,” Addy Osmani</li>
</ul>
<h3>Prototypal Inheritance With The DOM-To-Object Bridge Pattern</h3>
<p>In JavaScript, we don’t have the traditional notion of classes that you would find in other classical programming languages, but we do have prototypal inheritance. With prototypal inheritance, an object inherits from another object. And we can apply this concept to jQuery plugin development.</p>
<p><a href="http://alexsexton.com/">Alex Sexton</a> and <a href="http://scottgonzalez.com/">Scott Gonzalez</a> have looked at this topic in detail. In sum, they found that for organized modular development, clearly separating the object that defines the logic for a plugin from the plugin-generation process itself can be beneficial. The benefit is that testing your plugin’s code becomes easier, and you can also adjust the way things work behind the scenes without altering the way that any object APIs you’ve implemented are used.</p>
<p>In Sexton’s previous post on this topic, he implements a bridge that enables you to attach your general logic to a particular plugin, which we’ve implemented in the template below. Another advantage of this pattern is that you don’t have to constantly repeat the same plugin initialization code, thus ensuring that the concepts behind DRY development are maintained. Some developers might also find this pattern easier to read than others.</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">/*!
 * jQuery prototypal inheritance plugin boilerplate
 * Author: Alex Sexton, Scott Gonzalez
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */</span>

<span class="token comment" spellcheck="true">
// myObject - an object representing a concept that you want 
</span><span class="token comment" spellcheck="true">// to model (e.g. a car)
</span><span class="token keyword">var</span> myObject <span class="token operator">=</span> <span class="token punctuation">{</span>
  init<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span> options<span class="token punctuation">,</span> elem <span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token comment" spellcheck="true"> // Mix in the passed-in options with the default options
</span>    this<span class="token punctuation">.</span>options <span class="token operator">=</span> $<span class="token punctuation">.</span><span class="token function">extend<span class="token punctuation">(</span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> this<span class="token punctuation">.</span>options<span class="token punctuation">,</span> options <span class="token punctuation">)</span><span class="token punctuation">;</span>

   <span class="token comment" spellcheck="true"> // Save the element reference, both as a jQuery
</span>   <span class="token comment" spellcheck="true"> // reference and a normal reference
</span>    this<span class="token punctuation">.</span>elem  <span class="token operator">=</span> elem<span class="token punctuation">;</span>
    this<span class="token punctuation">.</span>$elem <span class="token operator">=</span> $<span class="token punctuation">(</span>elem<span class="token punctuation">)</span><span class="token punctuation">;</span>

   <span class="token comment" spellcheck="true"> // Build the DOM's initial structure
</span>    this<span class="token punctuation">.</span><span class="token function">_build<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>

   <span class="token comment" spellcheck="true"> // return this so that we can chain and use the bridge with less code.
</span>    <span class="token keyword">return</span> this<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">"No name"</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  _build<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token comment" spellcheck="true"> //this.$elem.html('&lt;h1&gt;'+this.options.name+'&lt;/h1&gt;');
</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  myMethod<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span> msg <span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token comment" spellcheck="true"> // You have direct access to the associated and cached
</span>   <span class="token comment" spellcheck="true"> // jQuery element
</span>   <span class="token comment" spellcheck="true"> // this.$elem.append('&lt;p&gt;'+msg+'&lt;/p&gt;');
</span>  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">
// Object.create support test, and fallback for browsers without it
</span><span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> Object<span class="token punctuation">.</span>create <span class="token operator">!</span><span class="token operator">==</span> <span class="token string">'function'</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    Object<span class="token punctuation">.</span>create <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>o<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">function</span> <span class="token function">F<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
        F<span class="token punctuation">.</span>prototype <span class="token operator">=</span> o<span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">F</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">
// Create a plugin based on a defined object
</span>$<span class="token punctuation">.</span>plugin <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span> name<span class="token punctuation">,</span> object <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  $<span class="token punctuation">.</span>fn<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span> options <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> this<span class="token punctuation">.</span><span class="token function">each<span class="token punctuation">(</span></span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token operator">!</span> $<span class="token punctuation">.</span><span class="token function">data<span class="token punctuation">(</span></span> this<span class="token punctuation">,</span> name <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        $<span class="token punctuation">.</span><span class="token function">data<span class="token punctuation">(</span></span> this<span class="token punctuation">,</span> name<span class="token punctuation">,</span> Object<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span>object<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">init<span class="token punctuation">(</span></span> 
        options<span class="token punctuation">,</span> this <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// Usage:
</span><span class="token comment" spellcheck="true">// With myObject, we could now essentially do this:
</span><span class="token comment" spellcheck="true">// $.plugin('myobj', myObject);
</span><span class="token comment" spellcheck="true">
// and at this point we could do the following
</span><span class="token comment" spellcheck="true">// $('#elem').myobj({name: "John"});
</span><span class="token comment" spellcheck="true">// var inst = $('#elem').data('myobj');
</span><span class="token comment" spellcheck="true">// inst.myMethod('I am a method');</span></code></pre>
<h4>Further Reading</h4>
<ul>
<li>“<a href="http://alexsexton.com/?p=51">Using Inheritance Patterns To Organize Large jQuery Applications</a><sup class="print_only"> 18</sup>,” Alex Sexton</li>
<li>“<a href="http://www.slideshare.net/SlexAxton/how-to-manage-large-jquery-apps">How to Manage Large Applications With jQuery or Whatever</a><sup class="print_only"> 19</sup>” (further discussion), Alex Sexton</li>
<li>“<a href="http://blog.bigbinary.com/2010/03/12/pratical-example-of-need-for-prototypal-inheritance.html">Practical Example of the Need for Prototypal Inheritance</a><sup class="print_only"> 20</sup>,” Neeraj Singh</li>
<li>“<a href="http://javascript.crockford.com/prototypal.html">Prototypal Inheritance in JavaScript</a><sup class="print_only"> 21</sup>,” Douglas Crockford</li>
</ul>
<h3>jQuery UI Widget Factory Bridge</h3>
<p>If you liked the idea of generating plugins based on objects in the last design pattern, then you might be interested in a method found in the jQuery UI Widget Factory called <code>$.widget.bridge</code>. This bridge basically serves as a middle layer between a JavaScript object that is created using <code>$.widget</code> and jQuery’s API, providing a more built-in solution to achieving object-based plugin definition. Effectively, we’re able to create stateful plugins using a custom constructor.</p>
<p>Moreover, <code>$.widget.bridge</code> provides access to a number of other capabilities, including the following:</p>
<ul>
<li>Both public and private methods are handled as one would expect in classical OOP (i.e. public methods are exposed, while calls to private methods are not possible);</li>
<li>Automatic protection against multiple initializations;</li>
<li>Automatic generation of instances of a passed object, and storage of them within the selection’s internal <code>$.data</code> cache;</li>
<li>Options can be altered post-initialization.</li>
</ul>
<p>For further information on how to use this pattern, look at the comments in the boilerplate below:</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">/*!
 * jQuery UI Widget factory "bridge" plugin boilerplate
 * Author: @erichynds
 * Further changes, additional comments: @addyosmani
 * Licensed under the MIT license
 */</span>


<span class="token comment" spellcheck="true">
// a "widgetName" object constructor
</span><span class="token comment" spellcheck="true">// required: this must accept two arguments,
</span><span class="token comment" spellcheck="true">// options: an object of configuration options
</span><span class="token comment" spellcheck="true">// element: the DOM element the instance was created on
</span><span class="token keyword">var</span> widgetName <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span> options<span class="token punctuation">,</span> element <span class="token punctuation">)</span><span class="token punctuation">{</span>
  this<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">"myWidgetName"</span><span class="token punctuation">;</span>
  this<span class="token punctuation">.</span>options <span class="token operator">=</span> options<span class="token punctuation">;</span>
  this<span class="token punctuation">.</span>element <span class="token operator">=</span> element<span class="token punctuation">;</span>
  this<span class="token punctuation">.</span><span class="token function">_init<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">
// the "widgetName" prototype
</span>widgetName<span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token punctuation">{</span>
    
   <span class="token comment" spellcheck="true"> // _create will automatically run the first time this 
</span>   <span class="token comment" spellcheck="true"> // widget is called
</span>    _create<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token comment" spellcheck="true"> // creation code
</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>

   <span class="token comment" spellcheck="true"> // required: initialization logic for the plugin goes into _init
</span>   <span class="token comment" spellcheck="true"> // This fires when your instance is first created and when 
</span>   <span class="token comment" spellcheck="true"> // attempting to initialize the widget again (by the bridge)
</span>   <span class="token comment" spellcheck="true"> // after it has already been initialized.
</span>    _init<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token comment" spellcheck="true"> // init code
</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>

   <span class="token comment" spellcheck="true"> // required: objects to be used with the bridge must contain an 
</span>   <span class="token comment" spellcheck="true"> // 'option'. Post-initialization, the logic for changing options
</span>   <span class="token comment" spellcheck="true"> // goes here. 
</span>    option<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span> key<span class="token punctuation">,</span> value <span class="token punctuation">)</span><span class="token punctuation">{</span>
        
       <span class="token comment" spellcheck="true"> // optional: get/change options post initialization
</span>       <span class="token comment" spellcheck="true"> // ignore if you don't require them.
</span>        
       <span class="token comment" spellcheck="true"> // signature: $('#foo').bar({ cool:false });
</span>        <span class="token keyword">if</span><span class="token punctuation">(</span> $<span class="token punctuation">.</span><span class="token function">isPlainObject<span class="token punctuation">(</span></span> key <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
            this<span class="token punctuation">.</span>options <span class="token operator">=</span> $<span class="token punctuation">.</span><span class="token function">extend<span class="token punctuation">(</span></span> <span class="token boolean">true</span><span class="token punctuation">,</span> this<span class="token punctuation">.</span>options<span class="token punctuation">,</span> key <span class="token punctuation">)</span><span class="token punctuation">;</span>
        
       <span class="token comment" spellcheck="true"> // signature: $('#foo').option('cool'); - getter
</span>        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> key <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> value <span class="token operator">===</span> <span class="token string">"undefined"</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> this<span class="token punctuation">.</span>options<span class="token punctuation">[</span> key <span class="token punctuation">]</span><span class="token punctuation">;</span>
            
       <span class="token comment" spellcheck="true"> // signature: $('#foo').bar('option', 'baz', false);
</span>        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            this<span class="token punctuation">.</span>options<span class="token punctuation">[</span> key <span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        
       <span class="token comment" spellcheck="true"> // required: option must return the current instance. 
</span>       <span class="token comment" spellcheck="true"> // When re-initializing an instance on elements, option 
</span>       <span class="token comment" spellcheck="true"> // is called first and is then chained to the _init method.
</span>        <span class="token keyword">return</span> this<span class="token punctuation">;</span>  
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

   <span class="token comment" spellcheck="true"> // notice no underscore is used for public methods
</span>    publicFunction<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 
        console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'public function'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

   <span class="token comment" spellcheck="true"> // underscores are used for private methods
</span>    _privateFunction<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 
        console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'private function'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">
// usage:
</span><span class="token comment" spellcheck="true">
// connect the widget obj to jQuery's API under the "foo" namespace
</span><span class="token comment" spellcheck="true">// $.widget.bridge("foo", widgetName);
</span><span class="token comment" spellcheck="true">
// create an instance of the widget for use
</span><span class="token comment" spellcheck="true">// var instance = $("#elem").foo({
</span><span class="token comment" spellcheck="true">//     baz: true
</span><span class="token comment" spellcheck="true">// });
</span><span class="token comment" spellcheck="true">
// your widget instance exists in the elem's data
</span><span class="token comment" spellcheck="true">// instance.data("foo").element; // =&gt; #elem element
</span><span class="token comment" spellcheck="true">
// bridge allows you to call public methods...
</span><span class="token comment" spellcheck="true">// instance.foo("publicFunction"); // =&gt; "public method"
</span><span class="token comment" spellcheck="true">
// bridge prevents calls to internal methods
</span><span class="token comment" spellcheck="true">// instance.foo("_privateFunction"); // =&gt; #elem element</span></code></pre>
<h4>Further Reading</h4>
<ul>
<li>“<a href="http://erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/">Using $.widget.bridge Outside of the Widget Factory</a><sup class="print_only"> 22</sup>,” Eric Hynds</li>
</ul>
<h3>jQuery Mobile Widgets With The Widget factory</h3>
<p>jQuery mobile is a framework that encourages the design of ubiquitous Web applications that work both on popular mobile devices and platforms and on the desktop. Rather than writing unique applications for each device or OS, you simply write the code once and it should ideally run on many of the A-, B- and C-grade browsers out there at the moment.</p>
<p>The fundamentals behind jQuery mobile can also be applied to plugin and widget development, as seen in some of the core jQuery mobile widgets used in the official library suite. What’s interesting here is that even though there are very small, subtle differences in writing a “mobile”-optimized widget, if you’re familiar with using the jQuery UI Widget Factory, you should be able to start writing these right away.</p>
<p>The mobile-optimized widget below has a number of interesting differences than the standard UI widget pattern we saw earlier:</p>
<ul>
<li><code>$.mobile.widget</code> is referenced as an existing widget prototype from which to inherit. For standard widgets, passing through any such prototype is unnecessary for basic development, but using this jQuery-mobile specific widget prototype provides internal access to further “options” formatting.</li>
<li>You’ll notice in <code>_create()</code> a guide on how the official jQuery mobile widgets handle element selection, opting for a role-based approach that better fits the jQM mark-up. This isn’t at all to say that standard selection isn’t recommended, only that this approach might make more sense given the structure of jQM pages.</li>
<li>Guidelines are also provided in comment form for applying your plugin methods on <code>pagecreate</code> as well as for selecting the plugin application via data roles and data attributes.</li>
</ul>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">/*!
 * (jQuery mobile) jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
 * Author: @scottjehl
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */</span>

<span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span> $<span class="token punctuation">,</span> window<span class="token punctuation">,</span> document<span class="token punctuation">,</span> undefined <span class="token punctuation">)</span> <span class="token punctuation">{</span>

   <span class="token comment" spellcheck="true"> //define a widget under a namespace of your choice
</span>   <span class="token comment" spellcheck="true"> //here 'mobile' has been used in the first parameter
</span>    $<span class="token punctuation">.</span><span class="token function">widget<span class="token punctuation">(</span></span> <span class="token string">"mobile.widgetName"</span><span class="token punctuation">,</span> $<span class="token punctuation">.</span>mobile<span class="token punctuation">.</span>widget<span class="token punctuation">,</span> <span class="token punctuation">{</span>

       <span class="token comment" spellcheck="true"> //Options to be used as defaults
</span>        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            foo<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            bar<span class="token punctuation">:</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>

        _create<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
           <span class="token comment" spellcheck="true"> // _create will automatically run the first time this 
</span>           <span class="token comment" spellcheck="true"> // widget is called. Put the initial widget set-up code 
</span>           <span class="token comment" spellcheck="true"> // here, then you can access the element on which 
</span>           <span class="token comment" spellcheck="true"> // the widget was called via this.element
</span>           <span class="token comment" spellcheck="true"> // The options defined above can be accessed via 
</span>           <span class="token comment" spellcheck="true"> // this.options
</span>
           <span class="token comment" spellcheck="true"> //var m = this.element,
</span>           <span class="token comment" spellcheck="true"> //p = m.parents(":jqmData(role='page')"),
</span>           <span class="token comment" spellcheck="true"> //c = p.find(":jqmData(role='content')")
</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>

       <span class="token comment" spellcheck="true"> // Private methods/props start with underscores
</span>        _dosomething<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>

       <span class="token comment" spellcheck="true"> // Public methods like these below can can be called 
</span>               <span class="token comment" spellcheck="true"> // externally: 
</span>       <span class="token comment" spellcheck="true"> // $("#myelem").foo( "enable", arguments );
</span>
        enable<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>

       <span class="token comment" spellcheck="true"> // Destroy an instantiated plugin and clean up modifications 
</span>       <span class="token comment" spellcheck="true"> // the widget has made to the DOM
</span>        destroy<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
           <span class="token comment" spellcheck="true"> //this.element.removeStuff();
</span>           <span class="token comment" spellcheck="true"> // For UI 1.8, destroy must be invoked from the 
</span>           <span class="token comment" spellcheck="true"> // base widget
</span>            $<span class="token punctuation">.</span>Widget<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>destroy<span class="token punctuation">.</span><span class="token function">call<span class="token punctuation">(</span></span>this<span class="token punctuation">)</span><span class="token punctuation">;</span>
           <span class="token comment" spellcheck="true"> // For UI 1.9, define _destroy instead and don't 
</span>           <span class="token comment" spellcheck="true"> // worry about calling the base widget
</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>

        methodB<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span>
           <span class="token comment" spellcheck="true"> //_trigger dispatches callbacks the plugin user can 
</span>           <span class="token comment" spellcheck="true"> // subscribe to
</span>           <span class="token comment" spellcheck="true"> //signature: _trigger( "callbackName" , [eventObject],
</span>           <span class="token comment" spellcheck="true"> //  [uiObject] )
</span>           <span class="token comment" spellcheck="true"> // eg. this._trigger( "hover", e /*where e.type == 
</span>           <span class="token comment" spellcheck="true"> // "mouseenter"*/, { hovered: $(e.target)});
</span>            this<span class="token punctuation">.</span><span class="token function">_trigger<span class="token punctuation">(</span></span><span class="token string">'methodA'</span><span class="token punctuation">,</span> event<span class="token punctuation">,</span> <span class="token punctuation">{</span>
                key<span class="token punctuation">:</span> value
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>

        methodA<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            this<span class="token punctuation">.</span><span class="token function">_trigger<span class="token punctuation">(</span></span><span class="token string">'dataChanged'</span><span class="token punctuation">,</span> event<span class="token punctuation">,</span> <span class="token punctuation">{</span>
                key<span class="token punctuation">:</span> value
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>

       <span class="token comment" spellcheck="true"> //Respond to any changes the user makes to the option method
</span>        _setOption<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> key<span class="token punctuation">,</span> value <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            switch <span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            case <span class="token string">"someValue"</span><span class="token punctuation">:</span>
               <span class="token comment" spellcheck="true"> //this.options.someValue = doSomethingWith( value );
</span>                <span class="token keyword">break</span><span class="token punctuation">;</span>
            default<span class="token punctuation">:</span>
               <span class="token comment" spellcheck="true"> //this.options[ key ] = value;
</span>                <span class="token keyword">break</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

           <span class="token comment" spellcheck="true"> // For UI 1.8, _setOption must be manually invoked from 
</span>           <span class="token comment" spellcheck="true"> // the base widget
</span>            $<span class="token punctuation">.</span>Widget<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>_setOption<span class="token punctuation">.</span><span class="token function">apply<span class="token punctuation">(</span></span>this<span class="token punctuation">,</span> arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
           <span class="token comment" spellcheck="true"> // For UI 1.9 the _super method can be used instead
</span>           <span class="token comment" spellcheck="true"> // this._super( "_setOption", key, value );
</span>        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span> jQuery<span class="token punctuation">,</span> window<span class="token punctuation">,</span> document <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
//usage: $("#myelem").foo( options );
</span>

<span class="token comment" spellcheck="true">/* Some additional notes - delete this section before using the boilerplate.

 We can also self-init this widget whenever a new page in jQuery Mobile is created. jQuery Mobile's "page" plugin dispatches a "create" event when a jQuery Mobile page (found via data-role=page attr) is first initialized.

We can listen for that event (called "pagecreate" ) and run our plugin automatically whenever a new page is created.

$(document).bind("pagecreate", function (e) {
    // In here, e.target refers to the page that was created 
    // (it's the target of the pagecreate event)
    // So, we can simply find elements on this page that match a 
    // selector of our choosing, and call our plugin on them.
    // Here's how we'd call our "foo" plugin on any element with a 
    // data-role attribute of "foo":
    $(e.target).find("[data-role='foo']").foo(options);

    // Or, better yet, let's write the selector accounting for the configurable 
    // data-attribute namespace
    $(e.target).find(":jqmData(role='foo')").foo(options);
});

That's it. Now you can simply reference the script containing your widget and pagecreate binding in a page running jQuery Mobile site, and it will automatically run like any other jQM plugin.
 */</span></code></pre>
<h3>RequireJS And The jQuery UI Widget Factory</h3>
<p>RequireJS is a script loader that provides a clean solution for encapsulating application logic inside manageable modules. It’s able to load modules in the correct order (through its order plugin); it simplifies the process of combining scripts via its excellent optimizer; and it provides the means for defining module dependencies on a per-module basis.</p>
<p>James Burke has written a comprehensive set of tutorials on getting started with RequireJS. But what if you’re already familiar with it and would like to wrap your jQuery UI widgets or plugins in a RequireJS-compatible module wrapper?.</p>
<p>In the boilerplate pattern below, we demonstrate how a compatible widget can be defined that does the following:</p>
<ul>
<li>Allows the definition of widget module dependencies, building on top of the previous jQuery UI boilerplate presented earlier;</li>
<li>Demonstrates one approach to passing in HTML template assets for creating templated widgets with jQuery (in conjunction with the jQuery tmpl plugin) (View the comments in <code>_create()</code>.)</li>
<li>Includes a quick tip on adjustments that you can make to your widget module if you wish to later pass it through the RequireJS optimizer</li>
</ul>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">/*!
 * jQuery UI Widget + RequireJS module boilerplate (for 1.8/9+)
 * Authors: @jrburke, @addyosmani
 * Licensed under the MIT license
 */</span>

 <span class="token comment" spellcheck="true">
// Note from James:
</span><span class="token comment" spellcheck="true">// 
</span><span class="token comment" spellcheck="true">// This assumes you are using the RequireJS+jQuery file, and 
</span><span class="token comment" spellcheck="true">// that the following files are all in the same directory: 
</span><span class="token comment" spellcheck="true">//
</span><span class="token comment" spellcheck="true">// - require-jquery.js 
</span><span class="token comment" spellcheck="true">// - jquery-ui.custom.min.js (custom jQuery UI build with widget factory) 
</span><span class="token comment" spellcheck="true">// - templates/ 
</span><span class="token comment" spellcheck="true">//    - asset.html 
</span><span class="token comment" spellcheck="true">// - ao.myWidget.js 
</span><span class="token comment" spellcheck="true">
// Then you can construct the widget like so: 
</span>

<span class="token comment" spellcheck="true">
//ao.myWidget.js file: 
</span><span class="token function">define<span class="token punctuation">(</span></span><span class="token string">"ao.myWidget"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"jquery"</span><span class="token punctuation">,</span> <span class="token string">"text!templates/asset.html"</span><span class="token punctuation">,</span> <span class="token string">"jquery-ui.custom.min"</span><span class="token punctuation">,</span><span class="token string">"jquery.tmpl"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>$<span class="token punctuation">,</span> assetHtml<span class="token punctuation">)</span> <span class="token punctuation">{</span>

   <span class="token comment" spellcheck="true"> // define your widget under a namespace of your choice
</span>   <span class="token comment" spellcheck="true"> // 'ao' is used here as a demonstration 
</span>    $<span class="token punctuation">.</span><span class="token function">widget<span class="token punctuation">(</span></span> <span class="token string">"ao.myWidget"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> 

       <span class="token comment" spellcheck="true"> // Options to be used as defaults
</span>        options<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> 

       <span class="token comment" spellcheck="true"> // Set up widget (e.g. create element, apply theming, 
</span>       <span class="token comment" spellcheck="true"> // bind events, etc.)
</span>        _create<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

           <span class="token comment" spellcheck="true"> // _create will automatically run the first time 
</span>           <span class="token comment" spellcheck="true"> // this widget is called. Put the initial widget 
</span>           <span class="token comment" spellcheck="true"> // set-up code here, then you can access the element 
</span>           <span class="token comment" spellcheck="true"> // on which the widget was called via this.element.
</span>           <span class="token comment" spellcheck="true"> // The options defined above can be accessed via 
</span>           <span class="token comment" spellcheck="true"> // this.options
</span>
           <span class="token comment" spellcheck="true"> //this.element.addStuff();
</span>           <span class="token comment" spellcheck="true"> //this.element.addStuff();
</span>           <span class="token comment" spellcheck="true"> //this.element.tmpl(assetHtml).appendTo(this.content); 
</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>

       <span class="token comment" spellcheck="true"> // Destroy an instantiated plugin and clean up modifications 
</span>       <span class="token comment" spellcheck="true"> // that the widget has made to the DOM
</span>        destroy<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
           <span class="token comment" spellcheck="true"> //t his.element.removeStuff();
</span>           <span class="token comment" spellcheck="true"> // For UI 1.8, destroy must be invoked from the base 
</span>           <span class="token comment" spellcheck="true"> // widget
</span>            $<span class="token punctuation">.</span>Widget<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>destroy<span class="token punctuation">.</span><span class="token function">call<span class="token punctuation">(</span></span> this <span class="token punctuation">)</span><span class="token punctuation">;</span>
           <span class="token comment" spellcheck="true"> // For UI 1.9, define _destroy instead and don't worry 
</span>           <span class="token comment" spellcheck="true"> // about calling the base widget
</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>

        methodB<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span>
           <span class="token comment" spellcheck="true"> // _trigger dispatches callbacks the plugin user can 
</span>           <span class="token comment" spellcheck="true"> // subscribe to
</span>           <span class="token comment" spellcheck="true"> //signature: _trigger( "callbackName" , [eventObject], 
</span>           <span class="token comment" spellcheck="true"> // [uiObject] )
</span>            this<span class="token punctuation">.</span><span class="token function">_trigger<span class="token punctuation">(</span></span><span class="token string">'methodA'</span><span class="token punctuation">,</span> event<span class="token punctuation">,</span> <span class="token punctuation">{</span>
                key<span class="token punctuation">:</span> value
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>

        methodA<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            this<span class="token punctuation">.</span><span class="token function">_trigger<span class="token punctuation">(</span></span><span class="token string">'dataChanged'</span><span class="token punctuation">,</span> event<span class="token punctuation">,</span> <span class="token punctuation">{</span>
                key<span class="token punctuation">:</span> value
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>

       <span class="token comment" spellcheck="true"> //Respond to any changes the user makes to the option method
</span>        _setOption<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> key<span class="token punctuation">,</span> value <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            switch <span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            case <span class="token string">"someValue"</span><span class="token punctuation">:</span>
               <span class="token comment" spellcheck="true"> //this.options.someValue = doSomethingWith( value );
</span>                <span class="token keyword">break</span><span class="token punctuation">;</span>
            default<span class="token punctuation">:</span>
               <span class="token comment" spellcheck="true"> //this.options[ key ] = value;
</span>                <span class="token keyword">break</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

           <span class="token comment" spellcheck="true"> // For UI 1.8, _setOption must be manually invoked from 
</span>           <span class="token comment" spellcheck="true"> // the base widget
</span>            $<span class="token punctuation">.</span>Widget<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>_setOption<span class="token punctuation">.</span><span class="token function">apply<span class="token punctuation">(</span></span> this<span class="token punctuation">,</span> arguments <span class="token punctuation">)</span><span class="token punctuation">;</span>
           <span class="token comment" spellcheck="true"> // For UI 1.9 the _super method can be used instead
</span>           <span class="token comment" spellcheck="true"> //this._super( "_setOption", key, value );
</span>        <span class="token punctuation">}</span>

       <span class="token comment" spellcheck="true"> //somewhere assetHtml would be used for templating, depending 
</span>       <span class="token comment" spellcheck="true"> // on your choice.
</span>    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 

<span class="token comment" spellcheck="true">
// If you are going to use the RequireJS optimizer to combine files 
</span><span class="token comment" spellcheck="true">// together, you can leave off the "ao.myWidget" argument to define: 
</span><span class="token comment" spellcheck="true">// define(["jquery", "text!templates/asset.html", "jquery-ui.custom.min"], …</span></code></pre>
<h4>Further Reading</h4>
<ul>
<li><a href="http://jqfundamentals.com/book/index.html#example-10.5">Using RequireJS with jQuery</a><sup class="print_only"> 23</sup>, Rebecca Murphey</li>
<li>“<a href="http://speakerrate.com/talks/2983-fast-modular-code-with-jquery-and-requirejs">Fast Modular Code With jQuery and RequireJS</a><sup class="print_only"> 24</sup>,” James Burke</li>
<li>“<a href="http://jquerysbestfriends.com/#slide1">jQuery’s Best Friends    </a><sup class="print_only"> 25</sup>,” Alex Sexton</li>
<li>“<a href="http://www.angrycoding.com/2011/09/managing-dependencies-with-requirejs.html">Managing Dependencies With RequireJS</a><sup class="print_only"> 26</sup>,” Ruslan Matveev</li>
</ul>
<h3>Globally And Per-Call Overridable Options (Best Options Pattern)</h3>
<p>For our next pattern, we’ll look at an optimal approach to configuring options and defaults for your plugin. The way you’re probably familiar with defining plugin options is to pass through an object literal of defaults to <code>$.extend</code>, as demonstrated in our basic plugin boilerplate.</p>
<p>If, however, you’re working with a plugin with many customizable options that you would like users to be able to override either globally or on a per-call level, then you can structure things a little differently.</p>
<p>Instead, by referring to an options object defined within the plugin namespace explicitly (for example, <code>$fn.pluginName.options</code>) and merging this with any options passed through to the plugin when it is initially invoked, users have the option of either passing options through during plugin initialization or overriding options outside of the plugin (as demonstrated here).</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">/*!
 * jQuery 'best options' plugin boilerplate
 * Author: @cowboy
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */</span>


<span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span> $<span class="token punctuation">,</span> window<span class="token punctuation">,</span> document<span class="token punctuation">,</span> undefined <span class="token punctuation">)</span> <span class="token punctuation">{</span>

    $<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>pluginName <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> options <span class="token punctuation">)</span> <span class="token punctuation">{</span>

       <span class="token comment" spellcheck="true"> // Here's a best practice for overriding 'defaults'
</span>       <span class="token comment" spellcheck="true"> // with specified options. Note how, rather than a 
</span>       <span class="token comment" spellcheck="true"> // regular defaults object being passed as the second
</span>       <span class="token comment" spellcheck="true"> // parameter, we instead refer to $.fn.pluginName.options 
</span>       <span class="token comment" spellcheck="true"> // explicitly, merging it with the options passed directly 
</span>       <span class="token comment" spellcheck="true"> // to the plugin. This allows us to override options both 
</span>       <span class="token comment" spellcheck="true"> // globally and on a per-call level. 
</span>
        options <span class="token operator">=</span> $<span class="token punctuation">.</span><span class="token function">extend<span class="token punctuation">(</span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> $<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>pluginName<span class="token punctuation">.</span>options<span class="token punctuation">,</span> options <span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">return</span> this<span class="token punctuation">.</span><span class="token function">each<span class="token punctuation">(</span></span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

            <span class="token keyword">var</span> elem <span class="token operator">=</span> $<span class="token punctuation">(</span>this<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

   <span class="token comment" spellcheck="true"> // Globally overriding options
</span>   <span class="token comment" spellcheck="true"> // Here are our publicly accessible default plugin options 
</span>   <span class="token comment" spellcheck="true"> // that are available in case the user doesn't pass in all 
</span>   <span class="token comment" spellcheck="true"> // of the values expected. The user is given a default
</span>   <span class="token comment" spellcheck="true"> // experience but can also override the values as necessary.
</span>   <span class="token comment" spellcheck="true"> // eg. $fn.pluginName.key ='otherval';
</span>
    $<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>pluginName<span class="token punctuation">.</span>options <span class="token operator">=</span> <span class="token punctuation">{</span>

        key<span class="token punctuation">:</span> <span class="token string">"value"</span><span class="token punctuation">,</span>
        myMethod<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> elem<span class="token punctuation">,</span> param <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span> jQuery<span class="token punctuation">,</span> window<span class="token punctuation">,</span> document <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h4>Further Reading</h4>
<ul>
<li><a href="http://benalman.com/talks/jquery-pluginization.html">jQuery Pluginization</a><sup class="print_only"> 27</sup> and the <a href="https://gist.github.com/472783/e8bf47340413129a8abe5fac55c83336efb5d4e1">accompanying gist</a><sup class="print_only"> 28</sup>, Ben Alman</li>
</ul>
<h3>A Highly Configurable And Mutable Plugin</h3>
<p>Like Alex Sexton’s pattern, the following logic for our plugin isn’t nested in a jQuery plugin itself. We instead define our plugin’s logic using a constructor and an object literal defined on its prototype, using jQuery for the actual instantiation of the plugin object.</p>
<p>Customization is taken to the next level by employing two little tricks, one of which you’ve seen in previous patterns:</p>
<ul>
<li>Options can be overridden both globally and per collection of elements;</li>
<li>Options can be customized on a <strong>per-element</strong> level through HTML5 data attributes (as shown below). This facilitates plugin behavior that can be applied to a collection of elements but then customized inline without the need to instantiate each element with a different default value. </li>
</ul>
<p>You don’t see the latter option in the wild too often, but it can be a significantly cleaner solution (as long as you don’t mind the inline approach). If you’re wondering where this could be useful, imagine writing a draggable plugin for a large set of elements. You could go about customizing their options like this:</p>
<pre class=" language-javascript"><code class=" language-javascript">javascript
$<span class="token punctuation">(</span><span class="token string">'.item-a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">draggable<span class="token punctuation">(</span></span><span class="token punctuation">{</span><span class="token string">'defaultPosition'</span><span class="token punctuation">:</span><span class="token string">'top-left'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">'.item-b'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">draggable<span class="token punctuation">(</span></span><span class="token punctuation">{</span><span class="token string">'defaultPosition'</span><span class="token punctuation">:</span><span class="token string">'bottom-right'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">'.item-c'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">draggable<span class="token punctuation">(</span></span><span class="token punctuation">{</span><span class="token string">'defaultPosition'</span><span class="token punctuation">:</span><span class="token string">'bottom-left'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
//etc</span></code></pre>
<p>But using our patterns inline approach, the following would be possible:</p>
<pre class=" language-javascript"><code class=" language-javascript">javascript
$<span class="token punctuation">(</span><span class="token string">'.items'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">draggable<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<pre class=" language-javascript"><code class=" language-javascript">html
<span class="token operator">&lt;</span>li class<span class="token operator">=</span><span class="token string">"item"</span> data<span class="token operator">-</span>plugin<span class="token operator">-</span>options<span class="token operator">=</span><span class="token string">'{"defaultPosition":"top-left"}'</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>li class<span class="token operator">=</span><span class="token string">"item"</span> data<span class="token operator">-</span>plugin<span class="token operator">-</span>options<span class="token operator">=</span><span class="token string">'{"defaultPosition":"bottom-left"}'</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span></code></pre>
<p>And so on. You may well have a preference for one of these approaches, but it is another potentially useful pattern to be aware of.</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">/*
 * 'Highly configurable' mutable plugin boilerplate
 * Author: @markdalgleish
 * Further changes, comments: @addyosmani
 * Licensed under the MIT license
 */</span>

<span class="token comment" spellcheck="true">
// Note that with this pattern, as per Alex Sexton's, the plugin logic
</span><span class="token comment" spellcheck="true">// hasn't been nested in a jQuery plugin. Instead, we just use
</span><span class="token comment" spellcheck="true">// jQuery for its instantiation.
</span>
<span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span> $<span class="token punctuation">,</span> window<span class="token punctuation">,</span> document<span class="token punctuation">,</span> undefined <span class="token punctuation">)</span><span class="token punctuation">{</span>

 <span class="token comment" spellcheck="true"> // our plugin constructor
</span>  <span class="token keyword">var</span> Plugin <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span> elem<span class="token punctuation">,</span> options <span class="token punctuation">)</span><span class="token punctuation">{</span>
      this<span class="token punctuation">.</span>elem <span class="token operator">=</span> elem<span class="token punctuation">;</span>
      this<span class="token punctuation">.</span>$elem <span class="token operator">=</span> $<span class="token punctuation">(</span>elem<span class="token punctuation">)</span><span class="token punctuation">;</span>
      this<span class="token punctuation">.</span>options <span class="token operator">=</span> options<span class="token punctuation">;</span>

     <span class="token comment" spellcheck="true"> // This next line takes advantage of HTML5 data attributes
</span>     <span class="token comment" spellcheck="true"> // to support customization of the plugin on a per-element
</span>     <span class="token comment" spellcheck="true"> // basis. For example,
</span>     <span class="token comment" spellcheck="true"> // &lt;div class=item' data-plugin-options='{"message":"Goodbye World!"}'&gt;&lt;/div&gt;
</span>      this<span class="token punctuation">.</span>metadata <span class="token operator">=</span> this<span class="token punctuation">.</span>$elem<span class="token punctuation">.</span><span class="token function">data<span class="token punctuation">(</span></span> <span class="token string">'plugin-options'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

 <span class="token comment" spellcheck="true"> // the plugin prototype
</span>  Plugin<span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token punctuation">{</span>
    defaults<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      message<span class="token punctuation">:</span> <span class="token string">'Hello world!'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    init<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token comment" spellcheck="true"> // Introduce defaults that can be extended either 
</span>     <span class="token comment" spellcheck="true"> // globally or using an object literal. 
</span>      this<span class="token punctuation">.</span>config <span class="token operator">=</span> $<span class="token punctuation">.</span><span class="token function">extend<span class="token punctuation">(</span></span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> this<span class="token punctuation">.</span>defaults<span class="token punctuation">,</span> this<span class="token punctuation">.</span>options<span class="token punctuation">,</span> 
      this<span class="token punctuation">.</span>metadata<span class="token punctuation">)</span><span class="token punctuation">;</span>

     <span class="token comment" spellcheck="true"> // Sample usage:
</span>     <span class="token comment" spellcheck="true"> // Set the message per instance:
</span>     <span class="token comment" spellcheck="true"> // $('#elem').plugin({ message: 'Goodbye World!'});
</span>     <span class="token comment" spellcheck="true"> // or
</span>     <span class="token comment" spellcheck="true"> // var p = new Plugin(document.getElementById('elem'), 
</span>     <span class="token comment" spellcheck="true"> // { message: 'Goodbye World!'}).init()
</span>     <span class="token comment" spellcheck="true"> // or, set the global default message:
</span>     <span class="token comment" spellcheck="true"> // Plugin.defaults.message = 'Goodbye World!'
</span>
      this<span class="token punctuation">.</span><span class="token function">sampleMethod<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> this<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    sampleMethod<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token comment" spellcheck="true"> // eg. show the currently configured message
</span>     <span class="token comment" spellcheck="true"> // console.log(this.config.message);
</span>    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  Plugin<span class="token punctuation">.</span>defaults <span class="token operator">=</span> Plugin<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>defaults<span class="token punctuation">;</span>

  $<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>plugin <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> this<span class="token punctuation">.</span><span class="token function">each<span class="token punctuation">(</span></span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">new</span> <span class="token class-name">Plugin</span><span class="token punctuation">(</span>this<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">init<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

 <span class="token comment" spellcheck="true"> //optional: window.Plugin = Plugin;
</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span> jQuery<span class="token punctuation">,</span> window <span class="token punctuation">,</span> document <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h4>Further Reading</h4>
<ul>
<li>“<a href="http://markdalgleish.com/2011/05/creating-highly-configurable-jquery-plugins/">Creating Highly Configurable jQuery Plugins</a><sup class="print_only"> 29</sup>,” Mark Dalgleish</li>
<li>“<a href="http://markdalgleish.com/2011/09/html5data-creating-highly-configurable-jquery-plugins-part-2/">Writing Highly Configurable jQuery Plugins, Part 2</a><sup class="print_only"> 30</sup>,” Mark Dalgleish</li>
</ul>
<h3>AMD- And CommonJS-Compatible Modules</h3>
<p>While many of the plugin and widget patterns presented above are acceptable for general use, they aren’t without their caveats. Some require jQuery or the jQuery UI Widget Factory to be present in order to function, while only a few could be easily adapted to work well as globally compatible modules both client-side and in other environments.</p>
<p>For this reason, a number of developers, including me, <a href="http://cdnjs.com/">CDNjs</a> maintainer <a href="https://github.com/thomasdavis">Thomas Davis</a> and <a href="https://github.com/rpflorence">RP Florence</a>, have been looking at both the <a href="https://github.com/amdjs/amdjs-api/wiki/AMD">AMD</a> (Asynchronous Module Definition) and <a href="http://wiki.commonjs.org/wiki/Modules">CommonJS</a> module specifications in the hopes of extending boilerplate plugin patterns to cleanly work with packages and dependencies. <a href="http://twitter.com/unscriptable">John Hann</a> and <a href="https://gist.github.com/1251221">Kit Cambridge</a> have also explored work in this area.</p>
<h4>AMD</h4>
<p>The AMD module format (a specification for defining modules where both the module and dependencies can be asynchronously loaded) has a number of distinct advantages, including being both asynchronous and highly flexible by nature, thus removing the tight coupling one commonly finds between code and module identity. It’s considered a reliable stepping stone to the <a href="http://wiki.ecmascript.org/doku.php?id=harmony:modules">module system</a> proposed for ES Harmony.</p>
<p>When working with anonymous modules, the idea of a module’s identity is DRY, making it trivial to avoid duplication of file names and code. Because the code is more portable, it can be easily moved to other locations without needing to alter the code itself. Developers can also run the same code in multiple environments just by using an AMD optimizer that works with a CommonJS environment, such as <a href="https://github.com/jrburke/r.js/">r.js</a>.</p>
<p>With AMD, the two key concepts you need to be aware of are the <code>require</code> method and the <code>define</code> method, which facilitate module definition and dependency loading. The <code>define</code> method is used to define named or unnamed modules based on the specification, using the following signature:</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token function">define<span class="token punctuation">(</span></span>module_id <span class="token comment" spellcheck="true">/*optional*/</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>dependencies<span class="token punctuation">]</span><span class="token punctuation">,</span> definition <span class="token keyword">function</span> <span class="token comment" spellcheck="true">/*function for instantiating the module or object*/</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>As you can tell from the inline comments, the module’s ID is an optional argument that is typically required only when non-AMD concatenation tools are being used (it could be useful in other edge cases, too). One of the benefits of opting not to use module IDs is having the flexibility to move your module around the file system without needing to change its ID. The module’s ID is equivalent to folder paths in simple packages and when not used in packages.</p>
<p>The dependencies argument represents an array of dependencies that are required by the module you are defining, and the third argument (factory) is a function that’s executed to instantiate your module. A barebones module could be defined as follows:</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">// Note: here, a module ID (myModule) is used for demonstration
</span><span class="token comment" spellcheck="true">// purposes only
</span>
<span class="token function">define<span class="token punctuation">(</span></span><span class="token string">'myModule'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> foo<span class="token punctuation">,</span> bar <span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token comment" spellcheck="true"> // return a value that defines the module export
</span>   <span class="token comment" spellcheck="true"> // (i.e. the functionality we want to expose for consumption)
</span>    <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// A more useful example, however, might be:
</span><span class="token function">define<span class="token punctuation">(</span></span><span class="token string">'myModule'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'math'</span><span class="token punctuation">,</span> <span class="token string">'graph'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> math<span class="token punctuation">,</span> graph <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
            plot<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword">return</span> graph<span class="token punctuation">.</span><span class="token function">drawPie<span class="token punctuation">(</span></span>math<span class="token punctuation">.</span><span class="token function">randomGrid<span class="token punctuation">(</span></span>x<span class="token punctuation">,</span>y<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>The <code>require</code> method, on the other hand, is typically used to load code in a top-level JavaScript file or in a module should you wish to dynamically fetch dependencies. Here is an example of its usage:</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">// Here, the 'exports' from the two modules loaded are passed as
</span><span class="token comment" spellcheck="true">// function arguments to the callback
</span>
<span class="token function">require<span class="token punctuation">(</span></span><span class="token punctuation">[</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> foo<span class="token punctuation">,</span> bar <span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token comment" spellcheck="true"> // rest of your code here
</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">
// And here's an AMD-example that shows dynamically loaded
</span><span class="token comment" spellcheck="true">// dependencies
</span>
<span class="token function">define<span class="token punctuation">(</span></span><span class="token keyword">function</span> <span class="token punctuation">(</span> require <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> isReady <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span> foobar<span class="token punctuation">;</span>

    <span class="token function">require<span class="token punctuation">(</span></span><span class="token punctuation">[</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>foo<span class="token punctuation">,</span> bar<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        isReady <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
        foobar <span class="token operator">=</span> <span class="token function">foo<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">bar<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

   <span class="token comment" spellcheck="true"> // We can still return a module
</span>    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        isReady<span class="token punctuation">:</span> isReady<span class="token punctuation">,</span>
        foobar<span class="token punctuation">:</span> foobar
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>The above are trivial examples of just how useful AMD modules can be, but they should provide a foundation that helps you understand how they work. Many big visible applications and companies currently use AMD modules as a part of their architecture, including <a href="http://www.ibm.com/">IBM</a> and the <a href="http://www.bbc.co.uk/iplayer/">BBC iPlayer</a>. The specification has been discussed for well over a year in both the Dojo and CommonJS communities, so it’s had time to evolve and improve. For more reasons on why many developers are opting to use AMD modules in their applications, you may be interested in James Burke’s article “<a href="http://tagneto.blogspot.com/2011/04/on-inventing-js-module-formats-and.html">On Inventing JS Module Formats and Script Loaders</a>.”</p>
<p>Shortly, we’ll look at writing globally compatible modules that work with AMD and other module formats and environments, something that offers even more power. Before that, we need to briefly discuss a related module format, one with a specification by CommonJS.</p>
<h4>CommonJS</h4>
<p>In case you’re not familiar with it, <a href="http://www.commonjs.org/">CommonJS</a> is a volunteer working group that designs, prototypes and standardizes JavaScript APIs. To date, it’s attempted to ratify standards for <a href="http://www.commonjs.org/specs/modules/1.0/">modules</a> and <a href="http://wiki.commonjs.org/wiki/Packages/1.0">packages</a>. The CommonJS module proposal specifies a simple API for declaring modules server-side; but, as John Hann correctly states, there are really only two ways to use CommonJS modules in the browser: either wrap them or wrap them.</p>
<p>What this means is that we can either have the browser wrap modules (which can be a slow process) or at build time (which can be fast to execute in the browser but requires a build step).</p>
<p>Some developers, however, feel that CommonJS is better suited to server-side development, which is one reason for the current disagreement over which format should be used as the de facto standard in the pre-Harmony age moving forward. One argument against CommonJS is that many CommonJS APIs address server-oriented features that one would simply not be able to implement at the browser level in JavaScript; for example, <code>io&gt;</code>, <code>system</code> and <code>js</code> could be considered unimplementable by the nature of their functionality.</p>
<p>That said, knowing how to structure CommonJS modules is useful so that we can better appreciate how they fit in when defining modules that might be used everywhere. Modules that have applications on both the client and server side include validation, conversion and templating engines. The way some developers choose which format to use is to opt for CommonJS when a module can be used in a server-side environment and to opt for AMD otherwise.</p>
<p>Because AMD modules are capable of using plugins and can define more granular things such as constructors and functions, this makes sense. CommonJS modules are able to define objects that are tedious to work with only if you’re trying to obtain constructors from them.</p>
<p>From a structural perspective, a CommonJS module is a reusable piece of JavaScript that exports specific objects made available to any dependent code; there are typically no function wrappers around such modules. Plenty of great tutorials on implementing CommonJS modules are out there, but at a high level, the modules basically contain two main parts: a variable named <code>exports</code>, which contains the objects that a module makes available to other modules, and a <code>require</code> function, which modules can use to import the exports of other modules.</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">// A very basic module named 'foobar'
</span><span class="token keyword">function</span> <span class="token function">foobar<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        this<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Hello foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        this<span class="token punctuation">.</span>bar <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Hello bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

exports<span class="token punctuation">.</span>foobar <span class="token operator">=</span> foobar<span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// An application using 'foobar'
</span><span class="token comment" spellcheck="true">
// Access the module relative to the path
</span><span class="token comment" spellcheck="true">// where both usage and module files exist
</span><span class="token comment" spellcheck="true">// in the same directory
</span>
<span class="token keyword">var</span> foobar <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./foobar'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>foobar<span class="token punctuation">,</span>
    test   <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">foobar<span class="token punctuation">.</span>foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

test<span class="token punctuation">.</span><span class="token function">bar<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true"> // 'Hello bar'</span></code></pre>
<p>There are a number of great JavaScript libraries for handling module loading in AMD and CommonJS formats, but my preference is <a href="http://requirejs.org/">RequireJS</a> (<a href="https://github.com/unscriptable/curl">curl.js</a> is also quite reliable). Complete tutorials on these tools are beyond the scope of this article, but I recommend John Hann’s post “<a href="http://unscriptable.com/index.php/2011/03/30/curl-js-yet-another-amd-loader/">curl.js: Yet Another AMD Loader</a>,” and James Burke’s post “<a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff943568"><br>
LABjs and RequireJS: Loading JavaScript Resources the Fun Way</a>.”</p>
<p>With what we’ve covered so far, wouldn’t it be great if we could define and load plugin modules compatible with AMD, CommonJS and other standards that are also compatible with different environments (client-side, server-side and beyond)? Our work on AMD and UMD (Universal Module Definition) plugins and widgets is still at a very early stage, but we’re hoping to develop solutions that can do just that.</p>
<p>One such pattern we’re <a href="https://github.com/addyosmani/jquery-plugin-patterns/issues/1">working on</a> at the moment appears below, which has the following features:</p>
<ul>
<li>A core/base plugin is loaded into a <code>$.core</code> namespace, which can then be easily extended using plugin extensions via the namespacing pattern. Plugins loaded via script tags automatically populate a <code>plugin</code> namespace under <code>core</code> (i.e. <code>$.core.plugin.methodName()</code>).</li>
<li>The pattern can be quite nice to work with because plugin extensions can access properties and methods defined in the base or, with a little tweaking, override default behavior so that it can be extended to do more.</li>
<li>A loader isn’t necessarily required at all to make this pattern fully function.</li>
</ul>
<p><strong>usage.html</strong></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span> src<span class="token operator">=</span><span class="token string">"http://code.jquery.com/jquery-1.6.4.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span> src<span class="token operator">=</span><span class="token string">"pluginCore.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span> src<span class="token operator">=</span><span class="token string">"pluginExtension.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">&gt;</span>

$<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>

   <span class="token comment" spellcheck="true"> // Our plugin 'core' is exposed under a core namespace in 
</span>   <span class="token comment" spellcheck="true"> // this example, which we first cache
</span>    <span class="token keyword">var</span> core <span class="token operator">=</span> $<span class="token punctuation">.</span>core<span class="token punctuation">;</span>

   <span class="token comment" spellcheck="true"> // Then use use some of the built-in core functionality to 
</span>   <span class="token comment" spellcheck="true"> // highlight all divs in the page yellow
</span>    core<span class="token punctuation">.</span><span class="token function">highlightAll<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>

   <span class="token comment" spellcheck="true"> // Access the plugins (extensions) loaded into the 'plugin'
</span>   <span class="token comment" spellcheck="true"> // namespace of our core module:
</span>
   <span class="token comment" spellcheck="true"> // Set the first div in the page to have a green background.
</span>    core<span class="token punctuation">.</span>plugin<span class="token punctuation">.</span><span class="token function">setGreen<span class="token punctuation">(</span></span><span class="token string">"div:first"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token comment" spellcheck="true"> // Here we're making use of the core's 'highlight' method
</span>   <span class="token comment" spellcheck="true"> // under the hood from a plugin loaded in after it
</span>
   <span class="token comment" spellcheck="true"> // Set the last div to the 'errorColor' property defined in 
</span>   <span class="token comment" spellcheck="true"> // our core module/plugin. If you review the code further down,
</span>   <span class="token comment" spellcheck="true"> // you'll see how easy it is to consume properties and methods
</span>   <span class="token comment" spellcheck="true"> // between the core and other plugins
</span>    core<span class="token punctuation">.</span>plugin<span class="token punctuation">.</span><span class="token function">setRed<span class="token punctuation">(</span></span><span class="token string">'div:last'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span></code></pre>
<p><strong>pluginCore.js</strong></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">// Module/Plugin core
</span><span class="token comment" spellcheck="true">// Note: the wrapper code you see around the module is what enables
</span><span class="token comment" spellcheck="true">// us to support multiple module formats and specifications by 
</span><span class="token comment" spellcheck="true">// mapping the arguments defined to what a specific format expects
</span><span class="token comment" spellcheck="true">// to be present. Our actual module functionality is defined lower 
</span><span class="token comment" spellcheck="true">// down, where a named module and exports are demonstrated. 
</span><span class="token comment" spellcheck="true">// 
</span><span class="token comment" spellcheck="true">// Note that dependencies can just as easily be declared if required
</span><span class="token comment" spellcheck="true">// and should work as demonstrated earlier with the AMD module examples.
</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span> name<span class="token punctuation">,</span> definition <span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">var</span> theModule <span class="token operator">=</span> <span class="token function">definition<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
     <span class="token comment" spellcheck="true"> // this is considered "safe":
</span>      hasDefine <span class="token operator">=</span> <span class="token keyword">typeof</span> define <span class="token operator">===</span> <span class="token string">'function'</span> <span class="token operator">&amp;&amp;</span> define<span class="token punctuation">.</span>amd<span class="token punctuation">,</span>
     <span class="token comment" spellcheck="true"> // hasDefine = typeof define === 'function',
</span>      hasExports <span class="token operator">=</span> <span class="token keyword">typeof</span> module <span class="token operator">!</span><span class="token operator">==</span> <span class="token string">'undefined'</span> <span class="token operator">&amp;&amp;</span> module<span class="token punctuation">.</span>exports<span class="token punctuation">;</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span> hasDefine <span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token comment" spellcheck="true"> // AMD Module
</span>    <span class="token function">define<span class="token punctuation">(</span></span>theModule<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> hasExports <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true"> // Node.js Module
</span>    module<span class="token punctuation">.</span>exports <span class="token operator">=</span> theModule<span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true"> // Assign to common namespaces or simply the global object (window)
</span>    <span class="token punctuation">(</span>this<span class="token punctuation">.</span>jQuery <span class="token operator">||</span> this<span class="token punctuation">.</span>ender <span class="token operator">||</span> this<span class="token punctuation">.</span>$ <span class="token operator">||</span> this<span class="token punctuation">)</span><span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> theModule<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span> <span class="token string">'core'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> module <span class="token operator">=</span> this<span class="token punctuation">;</span>
    module<span class="token punctuation">.</span>plugins <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    module<span class="token punctuation">.</span>highlightColor <span class="token operator">=</span> <span class="token string">"yellow"</span><span class="token punctuation">;</span>
    module<span class="token punctuation">.</span>errorColor <span class="token operator">=</span> <span class="token string">"red"</span><span class="token punctuation">;</span>

 <span class="token comment" spellcheck="true"> // define the core module here and return the public API
</span>
 <span class="token comment" spellcheck="true"> // This is the highlight method used by the core highlightAll()
</span> <span class="token comment" spellcheck="true"> // method and all of the plugins highlighting elements different
</span> <span class="token comment" spellcheck="true"> // colors
</span>  module<span class="token punctuation">.</span>highlight <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span>strColor<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>this<span class="token punctuation">.</span>jQuery<span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token function">jQuery<span class="token punctuation">(</span></span>el<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css<span class="token punctuation">(</span></span><span class="token string">'background'</span><span class="token punctuation">,</span> strColor<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
      highlightAll<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        module<span class="token punctuation">.</span><span class="token function">highlight<span class="token punctuation">(</span></span><span class="token string">'div'</span><span class="token punctuation">,</span> module<span class="token punctuation">.</span>highlightColor<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p><strong>pluginExtension.js</strong></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true">// Extension to module core
</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span> name<span class="token punctuation">,</span> definition <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> theModule <span class="token operator">=</span> <span class="token function">definition<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        hasDefine <span class="token operator">=</span> <span class="token keyword">typeof</span> define <span class="token operator">===</span> <span class="token string">'function'</span><span class="token punctuation">,</span>
        hasExports <span class="token operator">=</span> <span class="token keyword">typeof</span> module <span class="token operator">!</span><span class="token operator">==</span> <span class="token string">'undefined'</span> <span class="token operator">&amp;&amp;</span> module<span class="token punctuation">.</span>exports<span class="token punctuation">;</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span> hasDefine <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true"> // AMD Module
</span>        <span class="token function">define<span class="token punctuation">(</span></span>theModule<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> hasExports <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true"> // Node.js Module
</span>        module<span class="token punctuation">.</span>exports <span class="token operator">=</span> theModule<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true"> // Assign to common namespaces or simply the global object (window)
</span>

       <span class="token comment" spellcheck="true"> // account for for flat-file/global module extensions
</span>        <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> namespaces <span class="token operator">=</span> name<span class="token punctuation">.</span><span class="token function">split<span class="token punctuation">(</span></span><span class="token string">"."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> scope <span class="token operator">=</span> <span class="token punctuation">(</span>this<span class="token punctuation">.</span>jQuery <span class="token operator">||</span> this<span class="token punctuation">.</span>ender <span class="token operator">||</span> this<span class="token punctuation">.</span>$ <span class="token operator">||</span> this<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> namespaces<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> packageName <span class="token operator">=</span> namespaces<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>obj <span class="token operator">&amp;&amp;</span> i <span class="token operator">==</span> namespaces<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                obj<span class="token punctuation">[</span>packageName<span class="token punctuation">]</span> <span class="token operator">=</span> theModule<span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> scope<span class="token punctuation">[</span>packageName<span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                scope<span class="token punctuation">[</span>packageName<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            obj <span class="token operator">=</span> scope<span class="token punctuation">[</span>packageName<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token string">'core.plugin'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

   <span class="token comment" spellcheck="true"> // Define your module here and return the public API.
</span>   <span class="token comment" spellcheck="true"> // This code could be easily adapted with the core to
</span>   <span class="token comment" spellcheck="true"> // allow for methods that overwrite and extend core functionality
</span>   <span class="token comment" spellcheck="true"> // in order to expand the highlight method to do more if you wish.
</span>    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        setGreen<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> el <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">highlight<span class="token punctuation">(</span></span>el<span class="token punctuation">,</span> <span class="token string">'green'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        setRed<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> el <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">highlight<span class="token punctuation">(</span></span>el<span class="token punctuation">,</span> errorColor<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>While this is beyond the scope of this article, you may have noticed that different types of <code>require</code> methods were mentioned when we discussed AMD and CommonJS.</p>
<p>The concern with a similar naming convention is, of course, confusion, and the community is currently split on the merits of a global <code>require</code> function. John Hann’s suggestion here is that rather than call it <code>require</code>, which would probably fail to inform users of the difference between a global and inner <code>require</code>, renaming the global loader method something else might make more sense (such as the name of the library). For this reason, curl.js uses <code>curl</code>, and RequireJS uses <code>requirejs</code>.</p>
<p>This is probably a bigger discussion for another day, but I hope this brief walkthrough of both module types has increased your awareness of these formats and has encouraged you to further explore and experiment with them in your apps.</p>
<h4>Further Reading</h4>
<ul>
<li>“<a href="http://unscriptable.com/code/Using-AMD-loaders/#0">Using AMD Loaders to Write and Manage Modular JavaScript</a><sup class="print_only"> 31</sup>,” John Hann</li>
<li>“<a href="http://dailyjs.com/2010/10/18/modules/">Demystifying CommonJS Modules</a><sup class="print_only"> 32</sup>,” Alex Young</li>
<li>“<a href="http://unscriptable.com/index.php/2011/09/22/amd-module-patterns-singleton/">AMD Module Patterns: Singleton</a><sup class="print_only"> 33</sup>,” John Hann</li>
<li><a href="https://github.com/addyosmani/jquery-plugin-patterns/issues/1">Current discussion thread about AMD- and UMD-style modules for jQuery plugins</a><sup class="print_only"> 34</sup>, GitHub</li>
<li>“<a href="http://www.sitepen.com/blog/2010/09/30/run-anywhere-javascript-modules-boilerplate-code/">Run-Anywhere JavaScript Modules Boilerplate Code</a><sup class="print_only"> 35</sup>,” Kris Zyp</li>
<li>“<a href="http://tagneto.blogspot.com/2010/12/standards-and-proposals-for-javascript.html">Standards And Proposals for JavaScript Modules And jQuery</a><sup class="print_only"> 36</sup>,” James Burke</li>
</ul>
<h3>What Makes A Good jQuery Plugin?</h3>
<p>At the end of the day, patterns are just one aspect of plugin development. And before we wrap up, here are my criteria for selecting third-party plugins, which will hopefully help developers write them.</p>
<p><strong>Quality</strong><br>
Do your best to adhere to best practices with both the JavaScript and jQuery that you write. Are your solutions optimal? Do they follow the <a href="http://docs.jquery.com/JQuery_Core_Style_Guidelines">jQuery core style guidelines</a>? If not, is your code at least relatively clean and readable?</p>
<p><strong>Compatibility</strong><br>
Which versions of jQuery is your plugin compatible with? Have you tested it with the latest builds? If the plugin was written before jQuery 1.6, then it might have issues with attributes, because the way we approach them changed with that release. New versions of jQuery offer improvements and opportunities for the jQuery project to improve on what the core library offers. With this comes occasional breakages (mainly in major releases) as we move towards a better way of doing things. I’d like to see plugin authors update their code when necessary or, at a minimum, test their plugins with new versions to make sure everything works as expected.</p>
<p><strong>Reliability</strong><br>
Your plugin should come with its own set of unit tests. Not only do these prove your plugin actually works, but they can also improve the design without breaking it for end users. I consider unit tests essential for any serious jQuery plugin that is meant for a production environment, and they’re not that hard to write. For an excellent guide to automated JavaScript testing with QUnit, you may be interested in “<a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg749824">Automating JavaScript Testing With QUnit</a>,” by <a href="http://bassistance.de/">Jorn Zaefferer</a>.</p>
<p><strong>Performance</strong><br>
If the plugin needs to perform tasks that require a lot of computing power or that heavily manipulates the DOM, then you should follow best practices that minimize this. Use <a href="http://jsperf.com/">jsPerf.com</a> to test segments of your code so that you’re aware of how well it performs in different browsers before releasing the plugin.</p>
<p><strong>Documentation</strong><br>
If you intend for other developers to use your plugin, ensure that it’s well documented. Document your API. What methods and options does the plugin support? Does it have any gotchas that users need to be aware of? If users cannot figure out how to use your plugin, they’ll likely look for an alternative. Also, do your best to comment the code. This is by far the best gift you could give to other developers. If someone feels they can navigate your code base well enough to fork it or improve it, then you’ve done a good job.</p>
<p><strong>Likelihood of maintenance</strong><br>
When releasing a plugin, estimate how much time you’ll have to devote to maintenance and support. We all love to share our plugins with the community, but you need to set expectations for your ability to answer questions, address issues and make improvements. This can be done simply by stating your intentions for maintenance in the <em>README</em> file, and let users decide whether to make fixes themselves.</p>
<h4>Conclusion</h4>
<p>Today, we’ve explored several time-saving design patterns and best practices that can be employed to improve your plugin development process. Some are better suited to certain use cases than others, but I hope that the code comments that discuss the ins and outs of these variations on popular plugins and widgets were useful.</p>
<p>Remember, when selecting a pattern, be practical. Don’t use a plugin pattern just for the sake of it; rather, spend some time understanding the underlying structure, and establish how well it solves your problem or fits the component you’re trying to build. Choose the pattern that best suits your needs.</p>
<p>And that’s it. If there's a particular pattern or approach you prefer taking to writing plugins which you feel would benefit others (which hasn't been covered), please feel free to stick it in a <a href="http://gist.github.com/">gist</a> and share it in the comments below. I'm sure it would be appreciated. </p>
<p>Until next time, happy coding!</p>
<p><em>Thanks to John Hann, Julian Aubourg, Andree Hanson and everyone else who reviewed this post for their comments and feedback.</em></p>
<p><em>(al) (il)</em></p>
                        	<div id="textadtarget"><script type="text/javascript">// <![CDATA[
                    OA_show("Textad");
            	// ]]> </script><div id="textad"><style>.lead { color: #666;font-size: 0.9em; text-transform:uppercase;font-family:'Proxima Nova Bold', Verdana;letter-spacing:1px;background-color: #fff2cc; border-radius: 4px; padding: 3px 8px; margin-right: 2px; text-decoration: none !important; }</style><p style="padding: 1em 1em 1em 0; margin-top: 1.5em; margin-bottom: 2em; border-radius: 0.4em !important; overflow: hidden; "><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6124__zoneid=68__OXLCA=1__cb=ef0958019b__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fthe-mobile-book.html%3Fpk_campaign%3Dlearn-why-smashing-editors-note%26pk_kwd%3DMobileBook" style="border: none;" target="_self"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/mobile-book-opt.png" style="float: left; border-radius: 0.5em; max-width: 16% !important; padding: 0 1.25em 0 0; margin-top: 0;" alt="The Mobile Book"></a> <span style="display: block; overflow: hidden;"><a class="lead" href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6124__zoneid=68__OXLCA=1__cb=ef0958019b__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fthe-mobile-book.html%3Fpk_campaign%3Deditors-note-learn-why-mobile-book%26pk_kwd%3Dfirst-link" style="border-bottom: 1px solid rgba(0,0,0,0.1);" target="_self">The Mobile Book</a> If you're looking for a good book on Mobile, <a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6124__zoneid=68__OXLCA=1__cb=ef0958019b__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fthe-mobile-book.html%3Fpk_campaign%3Deditors-note-learn-why-mobile-book%26pk_kwd%3Dfirst-link" style="text-decoration: none !important; border-bottom: 1px solid rgba(0,0,0,0.1);" target="_self"><strong style="font-family: &#39;Proxima Nova Bold&#39;,Arial,serif;">this</strong></a> is the one — our carefully crafted hardcover book with lots of practical tips and techniques. A truly <em style="font-style: &#39;Proxima Nova Italic&#39;, Arial, sans-serif;">smashing</em> book on everything you need to know about Mobile today. <a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6124__zoneid=68__OXLCA=1__cb=ef0958019b__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fthe-mobile-book.html%3Fpk_campaign%3Deditors-note-learn-why-mobile-book%26pk_kwd%3Dfirst-link" style="text-decoration: none !important; border-bottom: 1px solid rgba(0,0,0,0.1);" target="_self"><strong style="font-family: &#39;Proxima Nova Bold&#39;,Arial,serif;">Get the Mobile Book.</strong></a></span></p><div id="beacon_ef0958019b" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(1).php" alt="" style="width: 0px; height: 0px;"></div></div>
</div>
	                    <div class="tagsdata">
            <p class="tags longtags"><strong>Tags:</strong><a href="http://coding.smashingmagazine.com/tag/jquery/" title="View all articles tagged &#39;JQuery&#39; (23)">JQuery</a></p>            <p><a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#top" class="backtotop single" title="Jump to the top of the page">↑ Back to top</a><a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fcoding.smashingmagazine.com%2F2011%2F10%2F11%2Fessential-jquery-plugin-patterns%2F&source=tweetbutton&text=Essential%20jQuery%20Plugin%20Patterns&url=http%3A%2F%2Fcoding.smashingmagazine.com%2F2011%2F10%2F11%2Fessential-jquery-plugin-patterns%2F&via=smashingmag" class="share-on-twitter single" title="Share on Twitter!">Share on Twitter</a></p>
        </div>
    </article><ul class="print_only_notelist"><li><h4>Footnotes:</h4></li><li><sup>0</sup> Addy Osmani - http://coding.smashingmagazine.com/author/addy-osmani/?rel=author</li><li><sup>1</sup> JQuery - http://coding.smashingmagazine.com/tag/jquery/</li><li><sup>2</sup> Plugins/Authoring - http://docs.jquery.com/Plugins/Authoring</li><li><sup>3</sup> Signs of a Poorly Written jQuery Plugin - http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/</li><li><sup>4</sup> How to Create Your Own jQuery Plugin - http://msdn.microsoft.com/en-us/scriptjunkie/ff608209</li><li><sup>5</sup> Style in jQuery Plugins and Why It Matters - http://msdn.microsoft.com/en-us/scriptjunkie/ff696759</li><li><sup>6</sup> Create Your First jQuery Plugin, Part 2 - http://enterprisejquery.com/2010/07/create-your-first-jquery-plugin-part-2-revising-your-plugin/</li><li><sup>7</sup> The jQuery UI Widget Factory - http://ajpiano.com/widgetfactory/#slide1</li><li><sup>8</sup> Introduction to Stateful Plugins and the Widget Factory - http://msdn.microsoft.com/en-us/scriptjunkie/ff706600</li><li><sup>9</sup> Widget Factory - http://wiki.jqueryui.com/w/page/12138135/Widget factory</li><li><sup>10</sup> Understanding jQuery UI Widgets: A Tutorial - http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/</li><li><sup>11</sup> Namespacing in JavaScript - http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/</li><li><sup>12</sup> Use Your $.fn jQuery Namespace - http://ryanflorence.com/use-your-fn-jquery-namespace/</li><li><sup>13</sup> JavaScript Namespacing - http://michaux.ca/articles/javascript-namespacing</li><li><sup>14</sup> Modules and namespaces in JavaScript - http://www.2ality.com/2011/04/modules-and-namespaces-in-javascript.html</li><li><sup>15</sup> Communication Between jQuery UI Widgets - http://www.devpatch.com/2010/03/communication-between-jquery-ui-widgets/</li><li><sup>16</sup> Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability - http://msdn.microsoft.com/en-us/scriptjunkie/hh201955.aspx</li><li><sup>17</sup> Using Inheritance Patterns To Organize Large jQuery Applications - http://alexsexton.com/?p=51</li><li><sup>18</sup> How to Manage Large Applications With jQuery or Whatever - http://www.slideshare.net/SlexAxton/how-to-manage-large-jquery-apps</li><li><sup>19</sup> Practical Example of the Need for Prototypal Inheritance - http://blog.bigbinary.com/2010/03/12/pratical-example-of-need-for-prototypal-inheritance.html</li><li><sup>20</sup> Prototypal Inheritance in JavaScript - http://javascript.crockford.com/prototypal.html</li><li><sup>21</sup> Using $.widget.bridge Outside of the Widget Factory - http://erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/</li><li><sup>22</sup> Using RequireJS with jQuery - http://jqfundamentals.com/book/index.html#example-10.5</li><li><sup>23</sup> Fast Modular Code With jQuery and RequireJS - http://speakerrate.com/talks/2983-fast-modular-code-with-jquery-and-requirejs</li><li><sup>24</sup> jQuery’s Best Friends     - http://jquerysbestfriends.com/#slide1</li><li><sup>25</sup> Managing Dependencies With RequireJS - http://www.angrycoding.com/2011/09/managing-dependencies-with-requirejs.html</li><li><sup>26</sup> jQuery Pluginization - http://benalman.com/talks/jquery-pluginization.html</li><li><sup>27</sup> accompanying gist - https://gist.github.com/472783/e8bf47340413129a8abe5fac55c83336efb5d4e1</li><li><sup>28</sup> Creating Highly Configurable jQuery Plugins - http://markdalgleish.com/2011/05/creating-highly-configurable-jquery-plugins/</li><li><sup>29</sup> Writing Highly Configurable jQuery Plugins, Part 2 - http://markdalgleish.com/2011/09/html5data-creating-highly-configurable-jquery-plugins-part-2/</li><li><sup>30</sup> Using AMD Loaders to Write and Manage Modular JavaScript - http://unscriptable.com/code/Using-AMD-loaders/#0</li><li><sup>31</sup> Demystifying CommonJS Modules - http://dailyjs.com/2010/10/18/modules/</li><li><sup>32</sup> AMD Module Patterns: Singleton - http://unscriptable.com/index.php/2011/09/22/amd-module-patterns-singleton/</li><li><sup>33</sup> Current discussion thread about AMD- and UMD-style modules for jQuery plugins - https://github.com/addyosmani/jquery-plugin-patterns/issues/1</li><li><sup>34</sup> Run-Anywhere JavaScript Modules Boilerplate Code - http://www.sitepen.com/blog/2010/09/30/run-anywhere-javascript-modules-boilerplate-code/</li><li><sup>35</sup> Standards And Proposals for JavaScript Modules And jQuery - http://tagneto.blogspot.com/2010/12/standards-and-proposals-for-javascript.html</li></ul>	
    <div class="bio clearfix">
        <div class="gravatar">
            <img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275" class="avatar avatar-78 photo">        </div>
        <div class="about">
            <a rel="author" href="http://coding.smashingmagazine.com/author/addy-osmani/?rel=author" title="Posts by Addy Osmani" class="post-author">Addy Osmani</a>            <p>Addy Osmani is a Developer Programs Engineer on the Chrome team at Google. A passionate JavaScript developer, he has written open-source books like 'Learning JavaScript Design Patterns' and 'Developing Backbone Applications', having also contributed to open-source projects like Modernizr and jQuery. He is currently working on 'Yeoman' - an opinionated workflow for building beautiful applications.</p>
        </div>
    </div>
            
        <div class="related-articles">
            <h2>Related Articles</h2>                                        <div class="related-article clearfix">
                        <a class="post-picture" href="http://coding.smashingmagazine.com/2011/07/15/orbit-and-reveal-jquery-plug-ins-that-will-breathe-life-into-your-pages/" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/related-131.jpg" alt="Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows"></a>
                        <h3><a href="http://coding.smashingmagazine.com/2011/07/15/orbit-and-reveal-jquery-plug-ins-that-will-breathe-life-into-your-pages/">Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows</a></h3>
                    </div>                                        <div class="related-article clearfix">
                        <a class="post-picture" href="http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/related-posts-099.jpg" alt="Make Your Own Bookmarklets With jQuery"></a>
                        <h3><a href="http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/">Make Your Own Bookmarklets With jQuery</a></h3>
                    </div>                                        <div class="related-article clearfix">
                        <a class="post-picture" href="http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/related-182.jpg" alt="Showcase of Creative Navigation Menus: Good and Bad Examples"></a>
                        <h3><a href="http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/">Showcase of Creative Navigation Menus: Good and Bad Examples</a></h3>
                    </div>        </div>
        
<!-- Smashing Magazine - Comment spnsr ed spot -->

<div class="newsletter-advertisement">
	<div id="mc_embed_signup" class="sm-search">
		<p>Every second Thursday we send out our lovely <strong>email newsletter</strong> with useful tips and techniques, recent articles and upcoming events. Thousands of readers have signed up already. Why don't you sign up, too, and get a <strong>free Smashing eBook</strong> as well?</p>
		<form action="http://smashingmagazine.us1.list-manage1.com/subscribe/post?u=16b832d9ad4b28edf261f34df&id=a1666656e0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate">
			<input name="EMAIL" type="text" placeholder="email address">
			<button class="search_submit" type="submit"><span class="first-type">Sign Up!</span></button>
			<div class="clearfix">
				<div class="num-subscribers"><script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/subscriber-count"></script><div class="mc-badge mc-badge05 mc-badge05-sub04" style="color: #51514a;font-family: sans-serif;font-size: 11px;font-weight: bold;margin: 0;padding: 0;width: auto;display: inline-block;">	<p style="color: #e95c41;font-family: sans-serif;font-size: 11px;font-weight: bold;margin: 0;padding: 0;line-height: 1em;width: auto;max-width: 195px;"><span class="subscriber-count" style="display: block;float: left;padding-top: 0px;background-color: #e95c41;color: #fff;padding: 4px 6px;line-height: 1em;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;font-size: 14px;margin-right: 5px;border-top: 1px solid #983c2a;">159,512</span> <span style="display: block;float: left;padding-top: 0px;">Subscribers</span> <a href="http://www.mailchimp.com/monkey-rewards/?utm_source=freemium_newsletter&utm_medium=email&utm_campaign=monkey_rewards&aid=16b832d9ad4b28edf261f34df&afl=1" target="_blank" class="powered-by" style="color: #51514a;font-family: sans-serif;font-size: 11px;font-weight: bold;margin: 0;padding: 0;background: transparent url(http://gallery.mailchimp.com/089443193dd93823f3fed78b4/images/powered_by_mailchimp01.png) 50% bottom no-repeat;display: block;height: 15px;width: 113px;text-indent: -9999px;float: left;padding-top: 0px;">Email marketing powered by MailChimp</a></p></div></div>
			</div>
		</form>
	</div>
</div>

<a id="comments"></a>

<ul class="sub-tabs clearfix">
    <li><a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#show-comments" class="active">51 Comments</a></li>
    <li><a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#best-comments">Best Comments</a></li></ul>

<div id="discussion" class="subtab-pages">
    <div id="show-comments" style="display: block;">
                <ol id="comments-overview" class="commentlist">
                <li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">1</span>
    <div class="comment" id="comment-550347">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/2f2c0f30424ba20b3315ec05d177d493" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Burak Erdem</h3> 
        		<span class="datetime"><a title="Commentlink #1" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550347">October 11th, 2011 5:47 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>One of the most descriptive articles I’ve ever read about jQuery and plugin patterns. Thank you…</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550347#respond" onclick="return addComment.moveForm(&quot;comment-550347&quot;, &quot;550347&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+30</div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">2</span>
    <div class="comment" id="comment-550353">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Addy Osmani</h3> 
        		<span class="datetime"><a title="Commentlink #2" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550353">October 11th, 2011 6:48 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>It’s my pleasure! I hope this post comes in useful :)</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550353#respond" onclick="return addComment.moveForm(&quot;comment-550353&quot;, &quot;550353&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+9</div>         		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">3</span>
    <div class="comment" id="comment-550352">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/5c4a839c1766f8160f9b3792eac22e53" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Thomas Strobl</h3> 
        		<span class="datetime"><a title="Commentlink #3" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550352">October 11th, 2011 6:46 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Very detailed and very useful. Thank you!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550352#respond" onclick="return addComment.moveForm(&quot;comment-550352&quot;, &quot;550352&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+4</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">4</span>
    <div class="comment" id="comment-550355">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/316af5a02714c7a6c1e64666f45b09d8" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Ralph</h3> 
        		<span class="datetime"><a title="Commentlink #4" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550355">October 11th, 2011 7:02 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>OMG… that’s one massive lengthy article. Not that I understood much of it :) (js/jQuery sill looks scary to me) but I think it’s just great that people take the time to put such detailed article together for others to learn. Thumbs up!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550355#respond" onclick="return addComment.moveForm(&quot;comment-550355&quot;, &quot;550355&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+5</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">5</span>
    <div class="comment" id="comment-550356">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/55f0869695ac25255772583e9e1ec78a" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Nick Mason</h3> 
        		<span class="datetime"><a title="Commentlink #5" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550356">October 11th, 2011 7:11 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Extremely well done article. Thanks for the posting &amp; insight.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550356#respond" onclick="return addComment.moveForm(&quot;comment-550356&quot;, &quot;550356&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+3</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">6</span>
    <div class="comment" id="comment-550358">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/85b55e2947ea2e426de6294a88c29c36" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">djheru</h3> 
        		<span class="datetime"><a title="Commentlink #6" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550358">October 11th, 2011 7:30 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Excellent writing, useful examples, and the perfect blend of basic and advanced content. This is one of the best online tutorials I’ve read in a long time, and I read a lot of them. You should be working for Lynda or Khan.</p>
<p>I hope to see more from you soon.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550358#respond" onclick="return addComment.moveForm(&quot;comment-550358&quot;, &quot;550358&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">7</span>
    <div class="comment" id="comment-550360">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/5ed4a08270923c8c04d0736490e34271" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Ankit Singhal</h3> 
        		<span class="datetime"><a title="Commentlink #7" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550360">October 11th, 2011 7:37 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great article… well described.</p>
<p>Thank you.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550360#respond" onclick="return addComment.moveForm(&quot;comment-550360&quot;, &quot;550360&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">8</span>
    <div class="comment" id="comment-550366">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/10ad57ef06737f2e10a454826554fb6b" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Christian</h3> 
        		<span class="datetime"><a title="Commentlink #8" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550366">October 11th, 2011 9:39 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Wow !!  Great ! </p>
<p>Need to be read again oin order to be well understood, but it’s a great Article …</p>
<p>How it seems easy to build a jquery plugin !! ;)</p>
<p>Congrats.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550366#respond" onclick="return addComment.moveForm(&quot;comment-550366&quot;, &quot;550366&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">9</span>
    <div class="comment" id="comment-550371">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/5a39b8e048d7ca23ba3e43110975bd4a" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">David Corbacho</h3> 
        		<span class="datetime"><a title="Commentlink #9" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550371">October 11th, 2011 11:14 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Addy, this is not an article, this should be a book’s chapter. Good content</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550371#respond" onclick="return addComment.moveForm(&quot;comment-550371&quot;, &quot;550371&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+10</div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">10</span>
    <div class="comment" id="comment-550372">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Addy Osmani</h3> 
        		<span class="datetime"><a title="Commentlink #10" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550372">October 11th, 2011 11:17 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>You are too kind :) Some of this may well end up in the JavaScript design patterns book I’m working on for O’Reilly at the moment. I’m just glad if it comes in helpful with anyone else’s projects for now.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550372#respond" onclick="return addComment.moveForm(&quot;comment-550372&quot;, &quot;550372&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment even depth-3 clearfix ">
    <span class="commentnumber">11</span>
    <div class="comment" id="comment-551385">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/1acadca974fd34be7c06838a5634063b" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">TG</h3> 
        		<span class="datetime"><a title="Commentlink #11" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551385">October 19th, 2011 9:30 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>If you are writing a book on patterns for O’Reilly …  Awesome!  Stoyan Stefanov’s ‘Javascript Patterns’ is very very good – and between the two of you that would be perfect.  I’ve been reading what I can from both of you.  When is yours expected to be completed ?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551385#respond" onclick="return addComment.moveForm(&quot;comment-551385&quot;, &quot;551385&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">12</span>
    <div class="comment" id="comment-550500">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/b73f3f00543952478ad7947f31d5e7d7" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Marco Barbosa</h3> 
        		<span class="datetime"><a title="Commentlink #12" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550500">October 12th, 2011 7:44 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Agreed. This was an excellent book chapter reading :)</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550500#respond" onclick="return addComment.moveForm(&quot;comment-550500&quot;, &quot;550500&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">13</span>
    <div class="comment" id="comment-550374">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/0ff9c3a23e73d87375f89ab6ccf62e31" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Geert-Jan Brits</h3> 
        		<span class="datetime"><a title="Commentlink #13" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550374">October 11th, 2011 12:00 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Really thorough piece! Breath of fresh air, where it seems popular nowadays to only post ‘soundsbite’ pieces. Particularly liked your reasoning behind the patterns, instead of just showing the end result, as well as the way in which patterns are gradually introduced and build upon.  In short: bookmarked!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550374#respond" onclick="return addComment.moveForm(&quot;comment-550374&quot;, &quot;550374&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">14</span>
    <div class="comment" id="comment-550375">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/7ea5bce168f688e532f705e2f20c54f1" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Mike Petrovich</h3> 
        		<span class="datetime"><a title="Commentlink #14" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550375">October 11th, 2011 12:04 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Wonderfully informative article! “Brilliant newcomer” indeed :)</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550375#respond" onclick="return addComment.moveForm(&quot;comment-550375&quot;, &quot;550375&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">15</span>
    <div class="comment" id="comment-550391">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/39570a104ac68d796a44fa9423c14f3e" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Andres Valencia</h3> 
        		<span class="datetime"><a title="Commentlink #15" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550391">October 11th, 2011 2:11 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Thanks Addy, badass article!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550391#respond" onclick="return addComment.moveForm(&quot;comment-550391&quot;, &quot;550391&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+3</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">16</span>
    <div class="comment" id="comment-550403">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/38f89c46ae31ab1ed90c5b662385fe12" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Ahmed El Sokkary</h3> 
        		<span class="datetime"><a title="Commentlink #16" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550403">October 11th, 2011 6:28 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Very useful, I don’t think there is an article I read before which covered jQuery plugins that way, thanks again and again :)</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550403#respond" onclick="return addComment.moveForm(&quot;comment-550403&quot;, &quot;550403&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">17</span>
    <div class="comment" id="comment-550412">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/62eb687d6d74d8834935a2336eb465b2" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">erminio ottone</h3> 
        		<span class="datetime"><a title="Commentlink #17" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550412">October 11th, 2011 7:02 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>That’s what i hate about js: we need to know too many pattern for doing stuff. </p>
<p>btw, i love addy’s articles, maybe verbose some time but i think they are the best modern js resource on the web. Looking forward for you o’reilly book! when it will be out?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550412#respond" onclick="return addComment.moveForm(&quot;comment-550412&quot;, &quot;550412&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">18</span>
    <div class="comment" id="comment-550445">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Addy Osmani</h3> 
        		<span class="datetime"><a title="Commentlink #18" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550445">October 12th, 2011 5:19 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Thanks.</p>
<p>The great thing about JavaScript is that it enables you to keep the structures you use as modules or plugins as complex or as simple as you’d like. It’s true that there are a ton of ways you could be doing any of the above, but rather than expecting a developer to learn these off, I would just say..find one that seems to fit what you’re after and go with it. If it doesn’t work out, try something else. </p>
<p>There isn’t a solid ETA on my O’Reilly book just yet, but we’ll probably target summer 2012 or before then for something that’s finalized. Hope that helps!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550445#respond" onclick="return addComment.moveForm(&quot;comment-550445&quot;, &quot;550445&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+4</div>         		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">19</span>
    <div class="comment" id="comment-550426">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/e1852bbca35effbadad683dfc990659c" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">CEA</h3> 
        		<span class="datetime"><a title="Commentlink #19" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550426">October 12th, 2011 12:34 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Cheers for this post which is extremly usefull</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550426#respond" onclick="return addComment.moveForm(&quot;comment-550426&quot;, &quot;550426&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">20</span>
    <div class="comment" id="comment-550433">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/187a98804b9bc8a62fcffa3e7300f150" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">mikaweb</h3> 
        		<span class="datetime"><a title="Commentlink #20" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550433">October 12th, 2011 2:13 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Brilliant!<br>
Well documented, it’s gonna help me a lot.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550433#respond" onclick="return addComment.moveForm(&quot;comment-550433&quot;, &quot;550433&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">21</span>
    <div class="comment" id="comment-550547">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/7d00dc7bc83cb8fd9bb502db7d4eda30" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Finn</h3> 
        		<span class="datetime"><a title="Commentlink #21" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550547">October 12th, 2011 2:19 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Wow, I thought I would know how to develop a jQuery plugin – but now I know that I don’t know anything… ;)</p>
<p>Thanks, well done!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550547#respond" onclick="return addComment.moveForm(&quot;comment-550547&quot;, &quot;550547&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">22</span>
    <div class="comment" id="comment-550579">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Addy Osmani</h3> 
        		<span class="datetime"><a title="Commentlink #22" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550579">October 12th, 2011 8:14 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>You are all very welcome :) Please do feel free to let me know if you’re uncertain about anything in the post and I’ll happily expand on it.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550579#respond" onclick="return addComment.moveForm(&quot;comment-550579&quot;, &quot;550579&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">23</span>
    <div class="comment" id="comment-550552">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/e474bf34ede6eb79e14fcfc79adc0375" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">balanza</h3> 
        		<span class="datetime"><a title="Commentlink #23" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550552">October 12th, 2011 3:15 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>addy osmani…. this guy is a code-machine!</p>
<p>thumb up</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550552#respond" onclick="return addComment.moveForm(&quot;comment-550552&quot;, &quot;550552&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+3</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">24</span>
    <div class="comment" id="comment-550564">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/b28d62703b9048a618e980ba69369460" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Sam</h3> 
        		<span class="datetime"><a title="Commentlink #24" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550564">October 12th, 2011 6:36 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Nice work Addy!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550564#respond" onclick="return addComment.moveForm(&quot;comment-550564&quot;, &quot;550564&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+3</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">25</span>
    <div class="comment" id="comment-550707">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/654082a9f3c9093064ce4c71990ca15f" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">John Neil</h3> 
        		<span class="datetime"><a title="Commentlink #25" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550707">October 14th, 2011 4:08 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Really really nice work here and at jQuery Boilerplate!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550707#respond" onclick="return addComment.moveForm(&quot;comment-550707&quot;, &quot;550707&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">26</span>
    <div class="comment" id="comment-550733">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/7d8d53be7476d9e29a0aeeba33876f11" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Cory Dorning</h3> 
        		<span class="datetime"><a title="Commentlink #26" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550733">October 14th, 2011 7:18 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Question…is there a need to pass window and document if your plugin isn’t using them? Seems like doing so would be counter intuitive…thoughts?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550733#respond" onclick="return addComment.moveForm(&quot;comment-550733&quot;, &quot;550733&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment even depth-2 clearfix ">
    <span class="commentnumber">27</span>
    <div class="comment" id="comment-551620">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Addy</h3> 
        		<span class="datetime"><a title="Commentlink #27" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551620">October 21st, 2011 12:13 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hey Cory. If you 100% aren’t planning on using references to window or document in your plugin, you don’t need to pass those. They’re really just there as a demonstration of best practices for those that do need to.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551620#respond" onclick="return addComment.moveForm(&quot;comment-551620&quot;, &quot;551620&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">28</span>
    <div class="comment" id="comment-550765">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/679f62d3c4b019ceaee5fd981638ad85" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Gueno</h3> 
        		<span class="datetime"><a title="Commentlink #28" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550765">October 14th, 2011 1:31 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Bookmarked ;)<br>
Thank you for this great article !</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550765#respond" onclick="return addComment.moveForm(&quot;comment-550765&quot;, &quot;550765&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">29</span>
    <div class="comment" id="comment-550918">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/25a1cbed2e4e537d811c0571bfc9fc8d" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Jason</h3> 
        		<span class="datetime"><a title="Commentlink #29" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550918">October 16th, 2011 3:46 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>very nice…THX</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550918#respond" onclick="return addComment.moveForm(&quot;comment-550918&quot;, &quot;550918&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">30</span>
    <div class="comment" id="comment-551147">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/7602e4ebbfcfa32a42e5300d68744179" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Sanjay</h3> 
        		<span class="datetime"><a title="Commentlink #30" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551147">October 18th, 2011 12:31 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hi Addy!</p>
<p>Nice post! but you should intend how to use these plugins. How can we call it in a DOM. That made it perfect</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551147#respond" onclick="return addComment.moveForm(&quot;comment-551147&quot;, &quot;551147&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">31</span>
    <div class="comment" id="comment-551179">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/c3b4e790530f7a348b84746e37b8a05f" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">fwolf</h3> 
        		<span class="datetime"><a title="Commentlink #31" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551179">October 18th, 2011 7:08 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Personally I’m avoiding the $-alias like the plague – if you ever had to fight with a site which had several frameworks integrated and ALL of them trying to rely on the $-alias, AND couldn’t just get rid of those other frameworks, you know: Never EVER again – no matter how nice patterns seem to be.</p>
<p>cu, w0lf</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551179#respond" onclick="return addComment.moveForm(&quot;comment-551179&quot;, &quot;551179&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">32</span>
    <div class="comment" id="comment-551621">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Addy</h3> 
        		<span class="datetime"><a title="Commentlink #32" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551621">October 21st, 2011 12:14 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>There are a number of ways of working around that from custom-aliasing jQuery to use something other than the dollar sign to better subclassing. Agreed that it can be a painful experience when a lot of other scripts and frameworks are trying to overwrite that namespace, but (with some effort) it’s a problem that can be worked around.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551621#respond" onclick="return addComment.moveForm(&quot;comment-551621&quot;, &quot;551621&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">33</span>
    <div class="comment" id="comment-551293">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/83fb3b9514546bc23f21cd215231f62e" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Tyler Mulligan</h3> 
        		<span class="datetime"><a title="Commentlink #33" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551293">October 19th, 2011 9:31 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great article.  I love that you went more in-depth with these. I found the rewrite on <a href="http://www.jqueryboilerplate.com/" rel="nofollow">http://www.jqueryboilerplate.com</a> the other day and was curious to know more. Thanks for explaining.  However, it was a bit off-putting that you didn’t include usage examples.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551293#respond" onclick="return addComment.moveForm(&quot;comment-551293&quot;, &quot;551293&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">34</span>
    <div class="comment" id="comment-551623">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Addy</h3> 
        		<span class="datetime"><a title="Commentlink #34" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551623">October 21st, 2011 12:17 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hey Tyler. The main reason for not including usage examples was really down to two factors. </p>
<p>1) If you’ve been developing plugins for a while, you’re likely to already know how to use the patterns included in this post to instantiate instances of your plugins .</p>
<p>2) time – ideally, usage would (and really, should) be shown, but this is something I intend on addressing at a later point in a beginners guide on the repository for the patterns that covers usage examples for each one. It’s on my todo list :)</p>
<p>Hopefully 2) will provide a solution for what you’re after.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551623#respond" onclick="return addComment.moveForm(&quot;comment-551623&quot;, &quot;551623&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment even depth-3 clearfix ">
    <span class="commentnumber">35</span>
    <div class="comment" id="comment-551627">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/83fb3b9514546bc23f21cd215231f62e" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Tyler Mulligan</h3> 
        		<span class="datetime"><a title="Commentlink #35" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551627">October 21st, 2011 12:53 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>I was able to figure it out after a few attempts but even as an experienced developer working with new paradigms can sometimes be confusing.  The examples just help take the stress out :)</p>
<p>I appreciate all your work so far and just to reiterate, thanks for the article, really helped me wrap my head around the different techniques and explain some more concepts to my developers.</p>
<p>Cheers</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551627#respond" onclick="return addComment.moveForm(&quot;comment-551627&quot;, &quot;551627&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
</ul>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">36</span>
    <div class="comment" id="comment-551457">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/b11cec1c466bb0f8149ee8cd38cf2d90" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Gary</h3> 
        		<span class="datetime"><a title="Commentlink #36" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551457">October 20th, 2011 7:52 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great job, as always, Addy. I learn so much from reading your articles, and realize how much more I need to learn (not so happy about that!).</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551457#respond" onclick="return addComment.moveForm(&quot;comment-551457&quot;, &quot;551457&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+3</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">37</span>
    <div class="comment" id="comment-551631">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/61c7422473cb7f2ab15d5589103e4482" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Rachit</h3> 
        		<span class="datetime"><a title="Commentlink #37" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551631">October 21st, 2011 2:00 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>This is brilliant Addy!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551631#respond" onclick="return addComment.moveForm(&quot;comment-551631&quot;, &quot;551631&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">38</span>
    <div class="comment" id="comment-561479">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/1ecbc1b13809d5835885f2de64b4b9cb" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Ryan</h3> 
        		<span class="datetime"><a title="Commentlink #38" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-561479">December 9th, 2011 10:46 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>For the “Prototypal Inheritance With The DOM-To-Object Bridge Pattern” example wouldn’t it be best to wrap the entire thing in:</p>
<p>;(function($, window, document, undefined) {<br>
// example code.<br>
})(jQuery, window, document);</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=561479#respond" onclick="return addComment.moveForm(&quot;comment-561479&quot;, &quot;561479&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">39</span>
    <div class="comment" id="comment-577121">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/c149431d7c92b7af13ad0c23b4fddb9e" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Darryl</h3> 
        		<span class="datetime"><a title="Commentlink #39" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-577121">April 13th, 2012 12:38 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>I’ve read a *lot* of plugin authoring articles in the last few days in order to learn good patterns and strategies. This is by far THE BEST article I’ve read to date. Well done Addy! Excellent job! Thank you. So much makes sense to me now, including the always puzzling leading ‘;’ at the beginning of the plugin.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=577121#respond" onclick="return addComment.moveForm(&quot;comment-577121&quot;, &quot;577121&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">40</span>
    <div class="comment" id="comment-600289">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/866bd5cf066ac2959a7d53c91ac68991" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Trev</h3> 
        		<span class="datetime"><a title="Commentlink #40" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-600289">August 17th, 2012 11:36 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Given I’m quite new to JS and jQuery plugin dev. but I’d really appreciate some extra detail in regards to the lightweight boilerplate.</p>
<p>A few Qs<br>
- Where would I ideally place private and public functions in this code structure?<br>
- Why does your namespaced boilerplate not include your lightweight boilerplate?</p>
<p>Cheers, and great article!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=600289#respond" onclick="return addComment.moveForm(&quot;comment-600289&quot;, &quot;600289&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">41</span>
    <div class="comment" id="comment-613602">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/fa9db3dd46e94d438970dec7e8241eaa" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Santhanam</h3> 
        		<span class="datetime"><a title="Commentlink #41" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-613602">September 26th, 2012 11:20 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>This is awesome.!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=613602#respond" onclick="return addComment.moveForm(&quot;comment-613602&quot;, &quot;613602&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">42</span>
    <div class="comment" id="comment-617024">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/84028d8546cc12fcb9c1d82d677691c6" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Tee Lewis</h3> 
        		<span class="datetime"><a title="Commentlink #42" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-617024">October 6th, 2012 6:10 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>For the namespacing example above, why is this line needed?<br>
base.myFunctionParam = myFunctionParam;</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=617024#respond" onclick="return addComment.moveForm(&quot;comment-617024&quot;, &quot;617024&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">43</span>
    <div class="comment" id="comment-619088">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/4079fe59171bc52305dc1de73fd09aff" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Rob</h3> 
        		<span class="datetime"><a title="Commentlink #43" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-619088">October 16th, 2012 11:34 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>That’s a long article, for anyone who wants the short version on jQuery plugin development check out this:</p>
<p><a href="http://www.websanova.com/tutorials/jquery/jquery-plugin-development-boilerplate" rel="nofollow">http://www.websanova.com/tutorials/jquery/jquery-plugin-development-boilerplate</a></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=619088#respond" onclick="return addComment.moveForm(&quot;comment-619088&quot;, &quot;619088&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">44</span>
    <div class="comment" id="comment-619601">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/c34e6769ed7506a59fae5f392966ea73" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Shelley Charles</h3> 
        		<span class="datetime"><a title="Commentlink #44" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-619601">October 22nd, 2012 11:57 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>I’ve managed to build a fairly complex plugin with your first example ‘A Lightweight Start’.</p>
<p>With this set-up, is it possible to change a default setting from outside the plugin?  For example, clicking a link on the page?</p>
<p>I’ve seen the $.data reference, but I’m not quite sure if this model supports getting or setting the plugin’s options on the fly.  I’m sure the following is wrong, but I hope you can see what I’m trying to achieve.</p>
<p>var result = $.data(‘#myElement’,'pluginName’,defaults.mySetting);</p>
<p>Many thanks for a very informative piece.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=619601#respond" onclick="return addComment.moveForm(&quot;comment-619601&quot;, &quot;619601&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">45</span>
    <div class="comment" id="comment-622568">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/2877c2f552d632b368284a11d76f88b7" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">libertux</h3> 
        		<span class="datetime"><a title="Commentlink #45" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-622568">November 30th, 2012 11:04 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hi,<br>
Great work it’s so helpfull. I’m using your first skeleton (A Lightweight Start) but i have a problem, I’cant use :</p>
<p>[code]<br>
.....<br>
   Plugin.prototype.init = function () {<br>
        // code goes here<br>
        var el = this.element;<br>
        el.find('.classname').each(function(){<br>
            alert('test');<br>
        });<br>
    };<br>
....<br>
[/code]</p>
<p>but i have this error :</p>
<p>[code]<br>
TypeError: el.find is not a function<br>
[Stopper sur une erreur]<br>
el.find('.classname').each(function(){<br>
[/code]</p>
<p>can some one help? THANKS</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=622568#respond" onclick="return addComment.moveForm(&quot;comment-622568&quot;, &quot;622568&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">46</span>
    <div class="comment" id="comment-624371">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ee5e7f7e1b4bf1aef645c39e3233523b" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Martin Vézina</h3> 
        		<span class="datetime"><a title="Commentlink #46" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-624371">December 19th, 2012 7:13 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hi Addy,</p>
<p>Thank you for this excellent mashup of the main techniques for plugin development. It is very useful.</p>
<p>I used some of the techniques described above to address a situation where I needed a semi-defined plugin, much like an abstract class in classical OOP. The concrete plugin could not be generalized and was to be extended each time a concrete implementation was needed. I thought it might be interesting to some as it solves a problem that is not completely answered by the patterns you describe. You can read about it in this article : <a href="http://lab.la-grange.ca/en/a-pattern-for-abstract-jquery-plugins" rel="nofollow">http://lab.la-grange.ca/en/a-pattern-for-abstract-jquery-plugins</a></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=624371#respond" onclick="return addComment.moveForm(&quot;comment-624371&quot;, &quot;624371&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">47</span>
    <div class="comment" id="comment-635312">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/2bceb2634f6ace80e3c419d27d5b1621" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">tkane2000</h3> 
        		<span class="datetime"><a title="Commentlink #47" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-635312">February 18th, 2013 1:09 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Good stuff, thanks!  Quick question about the lightweight pattern:</p>
<p>The ‘Plugin’ function references the ‘default’ property of it’s parent function.  Would that cause a circular reference and thereby a memory leak?</p>
<p>I’m referencing this article which is a bit out of date:<br>
<a href="http://www.ibm.com/developerworks/web/library/wa-memleak/" rel="nofollow">http://www.ibm.com/developerworks/web/library/wa-memleak/</a><br>
but I’m also using the pattern and getting a minor memory leak every time I call the plugin.</p>
<p>Thanks!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=635312#respond" onclick="return addComment.moveForm(&quot;comment-635312&quot;, &quot;635312&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">48</span>
    <div class="comment" id="comment-638787">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/6819c7d9e09bc1e77506d9456d0a4e40" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Brianna Deleasa</h3> 
        		<span class="datetime"><a title="Commentlink #48" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-638787">March 2nd, 2013 6:37 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Thank you for the in-depth article! I’ve been trying to create my first simple jQuery plugins, and this helped point me in the right direction.  I’ve got a lot of good techniques to follow and plenty of examples to reference.  Thanks!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=638787#respond" onclick="return addComment.moveForm(&quot;comment-638787&quot;, &quot;638787&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">49</span>
    <div class="comment" id="comment-642502">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/af58a7ddb954af741546d7179a573d81" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Ayesha Mahmood</h3> 
        		<span class="datetime"><a title="Commentlink #49" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-642502">March 7th, 2013 11:22 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>I have a question. Is there a way you can check if the plugin was initialized on any element within the plugin code? I don’t want to loop over all elements in the DOM to check that and I don’t want a global variable to check that. Is there another way?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=642502#respond" onclick="return addComment.moveForm(&quot;comment-642502&quot;, &quot;642502&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">50</span>
    <div class="comment" id="comment-643392">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/669a102e1f06264963e9e2b1002c55e3" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Ayesha Mahmood</h3> 
        		<span class="datetime"><a title="Commentlink #50" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-643392">March 8th, 2013 2:54 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>In addition to my question. I want a global variables within the plugin scope that is available to all plugin initializations. Is that possible?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=643392#respond" onclick="return addComment.moveForm(&quot;comment-643392&quot;, &quot;643392&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">51</span>
    <div class="comment" id="comment-665133">
        <div class="comment-author">
		<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/6b5b89f494e2ddaa6cf74787ebcfe0f1" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Dileep</h3> 
        		<span class="datetime"><a title="Commentlink #51" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-665133">April 10th, 2013 1:04 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Dear, Sir,</p>
<p>  I have used the File Input control, with this theame. And i need a Javascript code for clear the File input control.. How to use it…??</p>
<p>Please help me…</p>
<p>Thanks and Regards,</p>
<p>Dileep</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=665133#respond" onclick="return addComment.moveForm(&quot;comment-665133&quot;, &quot;665133&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
        </ol>
                        </div>
		    <div id="best-comments" style="display: none;">
			<ol id="ratedcomments-overview" class="commentlist">
					<li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">1</span>
			<div class="comment" id="bestcomment-550347">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/2f2c0f30424ba20b3315ec05d177d493" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Burak Erdem</h3> 
					<span class="datetime"><a title="Commentlink #1" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550347">October 11th, 2011 5:47 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>One of the most descriptive articles I’ve ever read about jQuery and plugin patterns. Thank you…</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+30</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">2</span>
			<div class="comment" id="bestcomment-550371">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/5a39b8e048d7ca23ba3e43110975bd4a" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">David Corbacho</h3> 
					<span class="datetime"><a title="Commentlink #2" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550371">October 11th, 2011 11:14 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Addy, this is not an article, this should be a book’s chapter. Good content</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+10</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">3</span>
			<div class="comment" id="bestcomment-550353">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Addy Osmani</h3> 
					<span class="datetime"><a title="Commentlink #3" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550353">October 11th, 2011 6:48 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>It’s my pleasure! I hope this post comes in useful :)</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+9</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">4</span>
			<div class="comment" id="bestcomment-550355">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/316af5a02714c7a6c1e64666f45b09d8" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Ralph</h3> 
					<span class="datetime"><a title="Commentlink #4" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550355">October 11th, 2011 7:02 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>OMG… that’s one massive lengthy article. Not that I understood much of it :) (js/jQuery sill looks scary to me) but I think it’s just great that people take the time to put such detailed article together for others to learn. Thumbs up!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+5</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">5</span>
			<div class="comment" id="bestcomment-550445">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Addy Osmani</h3> 
					<span class="datetime"><a title="Commentlink #5" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550445">October 12th, 2011 5:19 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Thanks.</p>
<p>The great thing about JavaScript is that it enables you to keep the structures you use as modules or plugins as complex or as simple as you’d like. It’s true that there are a ton of ways you could be doing any of the above, but rather than expecting a developer to learn these off, I would just say..find one that seems to fit what you’re after and go with it. If it doesn’t work out, try something else. </p>
<p>There isn’t a solid ETA on my O’Reilly book just yet, but we’ll probably target summer 2012 or before then for something that’s finalized. Hope that helps!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+4</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">6</span>
			<div class="comment" id="bestcomment-550352">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/5c4a839c1766f8160f9b3792eac22e53" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Thomas Strobl</h3> 
					<span class="datetime"><a title="Commentlink #6" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550352">October 11th, 2011 6:46 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Very detailed and very useful. Thank you!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+4</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">7</span>
			<div class="comment" id="bestcomment-550356">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/55f0869695ac25255772583e9e1ec78a" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Nick Mason</h3> 
					<span class="datetime"><a title="Commentlink #7" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550356">October 11th, 2011 7:11 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Extremely well done article. Thanks for the posting &amp; insight.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">8</span>
			<div class="comment" id="bestcomment-551457">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/b11cec1c466bb0f8149ee8cd38cf2d90" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Gary</h3> 
					<span class="datetime"><a title="Commentlink #8" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551457">October 20th, 2011 7:52 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Great job, as always, Addy. I learn so much from reading your articles, and realize how much more I need to learn (not so happy about that!).</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">9</span>
			<div class="comment" id="bestcomment-550391">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/39570a104ac68d796a44fa9423c14f3e" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Andres Valencia</h3> 
					<span class="datetime"><a title="Commentlink #9" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550391">October 11th, 2011 2:11 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Thanks Addy, badass article!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">10</span>
			<div class="comment" id="bestcomment-550552">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/e474bf34ede6eb79e14fcfc79adc0375" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">balanza</h3> 
					<span class="datetime"><a title="Commentlink #10" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550552">October 12th, 2011 3:15 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>addy osmani…. this guy is a code-machine!</p>
<p>thumb up</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">11</span>
			<div class="comment" id="bestcomment-550564">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/b28d62703b9048a618e980ba69369460" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Sam</h3> 
					<span class="datetime"><a title="Commentlink #11" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550564">October 12th, 2011 6:36 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Nice work Addy!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">12</span>
			<div class="comment" id="bestcomment-551293">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/83fb3b9514546bc23f21cd215231f62e" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Tyler Mulligan</h3> 
					<span class="datetime"><a title="Commentlink #12" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551293">October 19th, 2011 9:31 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Great article.  I love that you went more in-depth with these. I found the rewrite on <a href="http://www.jqueryboilerplate.com/" rel="nofollow">http://www.jqueryboilerplate.com</a> the other day and was curious to know more. Thanks for explaining.  However, it was a bit off-putting that you didn’t include usage examples.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">13</span>
			<div class="comment" id="bestcomment-550918">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/25a1cbed2e4e537d811c0571bfc9fc8d" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Jason</h3> 
					<span class="datetime"><a title="Commentlink #13" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550918">October 16th, 2011 3:46 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>very nice…THX</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">14</span>
			<div class="comment" id="bestcomment-550426">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/e1852bbca35effbadad683dfc990659c" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">CEA</h3> 
					<span class="datetime"><a title="Commentlink #14" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550426">October 12th, 2011 12:34 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Cheers for this post which is extremly usefull</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">15</span>
			<div class="comment" id="bestcomment-550433">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/187a98804b9bc8a62fcffa3e7300f150" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">mikaweb</h3> 
					<span class="datetime"><a title="Commentlink #15" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550433">October 12th, 2011 2:13 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Brilliant!<br>
Well documented, it’s gonna help me a lot.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">16</span>
			<div class="comment" id="bestcomment-550366">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/10ad57ef06737f2e10a454826554fb6b" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Christian</h3> 
					<span class="datetime"><a title="Commentlink #16" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550366">October 11th, 2011 9:39 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Wow !!  Great ! </p>
<p>Need to be read again oin order to be well understood, but it’s a great Article …</p>
<p>How it seems easy to build a jquery plugin !! ;)</p>
<p>Congrats.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">17</span>
			<div class="comment" id="bestcomment-550374">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/0ff9c3a23e73d87375f89ab6ccf62e31" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Geert-Jan Brits</h3> 
					<span class="datetime"><a title="Commentlink #17" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550374">October 11th, 2011 12:00 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Really thorough piece! Breath of fresh air, where it seems popular nowadays to only post ‘soundsbite’ pieces. Particularly liked your reasoning behind the patterns, instead of just showing the end result, as well as the way in which patterns are gradually introduced and build upon.  In short: bookmarked!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">18</span>
			<div class="comment" id="bestcomment-550375">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/7ea5bce168f688e532f705e2f20c54f1" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Mike Petrovich</h3> 
					<span class="datetime"><a title="Commentlink #18" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550375">October 11th, 2011 12:04 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Wonderfully informative article! “Brilliant newcomer” indeed :)</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">19</span>
			<div class="comment" id="bestcomment-550403">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/38f89c46ae31ab1ed90c5b662385fe12" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Ahmed El Sokkary</h3> 
					<span class="datetime"><a title="Commentlink #19" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550403">October 11th, 2011 6:28 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Very useful, I don’t think there is an article I read before which covered jQuery plugins that way, thanks again and again :)</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">20</span>
			<div class="comment" id="bestcomment-550412">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/62eb687d6d74d8834935a2336eb465b2" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">erminio ottone</h3> 
					<span class="datetime"><a title="Commentlink #20" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550412">October 11th, 2011 7:02 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>That’s what i hate about js: we need to know too many pattern for doing stuff. </p>
<p>btw, i love addy’s articles, maybe verbose some time but i think they are the best modern js resource on the web. Looking forward for you o’reilly book! when it will be out?</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">21</span>
			<div class="comment" id="bestcomment-550547">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/7d00dc7bc83cb8fd9bb502db7d4eda30" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Finn</h3> 
					<span class="datetime"><a title="Commentlink #21" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550547">October 12th, 2011 2:19 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Wow, I thought I would know how to develop a jQuery plugin – but now I know that I don’t know anything… ;)</p>
<p>Thanks, well done!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">22</span>
			<div class="comment" id="bestcomment-550579">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Addy Osmani</h3> 
					<span class="datetime"><a title="Commentlink #22" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550579">October 12th, 2011 8:14 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>You are all very welcome :) Please do feel free to let me know if you’re uncertain about anything in the post and I’ll happily expand on it.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">23</span>
			<div class="comment" id="bestcomment-551620">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Addy</h3> 
					<span class="datetime"><a title="Commentlink #23" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551620">October 21st, 2011 12:13 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Hey Cory. If you 100% aren’t planning on using references to window or document in your plugin, you don’t need to pass those. They’re really just there as a demonstration of best practices for those that do need to.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">24</span>
			<div class="comment" id="bestcomment-550360">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/5ed4a08270923c8c04d0736490e34271" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Ankit Singhal</h3> 
					<span class="datetime"><a title="Commentlink #24" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550360">October 11th, 2011 7:37 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Great article… well described.</p>
<p>Thank you.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">25</span>
			<div class="comment" id="bestcomment-550358">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/85b55e2947ea2e426de6294a88c29c36" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">djheru</h3> 
					<span class="datetime"><a title="Commentlink #25" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550358">October 11th, 2011 7:30 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Excellent writing, useful examples, and the perfect blend of basic and advanced content. This is one of the best online tutorials I’ve read in a long time, and I read a lot of them. You should be working for Lynda or Khan.</p>
<p>I hope to see more from you soon.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">26</span>
			<div class="comment" id="bestcomment-550707">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/654082a9f3c9093064ce4c71990ca15f" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">John Neil</h3> 
					<span class="datetime"><a title="Commentlink #26" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550707">October 14th, 2011 4:08 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Really really nice work here and at jQuery Boilerplate!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">27</span>
			<div class="comment" id="bestcomment-550733">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/7d8d53be7476d9e29a0aeeba33876f11" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Cory Dorning</h3> 
					<span class="datetime"><a title="Commentlink #27" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550733">October 14th, 2011 7:18 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Question…is there a need to pass window and document if your plugin isn’t using them? Seems like doing so would be counter intuitive…thoughts?</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">28</span>
			<div class="comment" id="bestcomment-550765">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/679f62d3c4b019ceaee5fd981638ad85" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Gueno</h3> 
					<span class="datetime"><a title="Commentlink #28" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550765">October 14th, 2011 1:31 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Bookmarked ;)<br>
Thank you for this great article !</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">29</span>
			<div class="comment" id="bestcomment-550372">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Addy Osmani</h3> 
					<span class="datetime"><a title="Commentlink #29" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550372">October 11th, 2011 11:17 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>You are too kind :) Some of this may well end up in the JavaScript design patterns book I’m working on for O’Reilly at the moment. I’m just glad if it comes in helpful with anyone else’s projects for now.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">30</span>
			<div class="comment" id="bestcomment-550500">
			<div class="comment-author">
				<img alt="" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/b73f3f00543952478ad7947f31d5e7d7" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Marco Barbosa</h3> 
					<span class="datetime"><a title="Commentlink #30" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550500">October 12th, 2011 7:44 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Agreed. This was an excellent book chapter reading :)</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
					</li></ol>
				    </div>
	</div>


<div id="respond">

    <h3>Leave a Comment</h3>

    <p class="desc">Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and <code>rel="nofollow"</code> is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!</p>

        
            <a rel="nofollow" id="cancel-comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#respond" style="display:none;">Click here to cancel reply.</a>								<div id="respond">
				<h3 id="reply-title"> <small><a rel="nofollow" id="cancel-comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#respond" style="display:none;">Click here to cancel reply.</a></small></h3>
									<form action="http://coding.smashingmagazine.com/wp-comments-post.php" method="post" id="commentform">
																										<div class="clearfix"><p class="input-half"><label for="comment_author">Your name<span class="required">*</span></label><input type="text" name="author" id="comment_author" value="" tabindex="1" class="input"></p>
<p class="input-half"><label for="email">Your email<span class="required">*</span></label><input type="text" name="email" id="email" value="" tabindex="2" class="input"></p></div>
<input type="text" name="2063dawebsite" id="2063dawebsite" value="" class="_hidden hide">
												<div id="message-box"><div class="cancel-comment-reply right"><small></small></div><label for="comment">Your message<span class="required">*</span></label><textarea name="comment" id="comment" rows="10" tabindex="4" class="input textarea"></textarea></div>												<p class="form-submit">
							<input name="submit" type="submit" id="submit" value="Submit Comment">
							<input type="hidden" name="comment_post_ID" value="115389" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
						</p>
						<p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="00599a34ad"></p>					</form>
							</div><!-- #respond -->
						
        
</div>


</div><!-- .col.main -->								
</div><!-- .grid -->
<p><a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#top" class="backtotop" title="Jump to the top of the page">↑ Back to top</a></p>
</div><!-- .fluid -->
</div><!-- #container -->
	<div id="wpsidebar">
		
    <div class="col side">
			
      <div class="sm-search wp-search-form">			
				
        <form method="get" action="http://www.smashingmagazine.com/search-results/" target="_top">
					<label for="magazine-search">Search on Smashing Magazine</label>
					<input id="magazine-search" name="q" type="text" placeholder="e.g. Responsive design">
					<button class="search_submit" type="submit">Search</button>
					<input type="hidden" name="cx" value="partner-pub-6779860845561969:5884617103">
					<input type="hidden" name="cof" value="FORID:10">
					<input type="hidden" name="ie" value="UTF-8">
				</form>
        
			</div>
			
      <div class="ed spnsrlistwrapper">

					  			<span class="declare">Advertisement</span>
	  			<span class="awithus"><a href="mailto:advertising@smashingmagazine.com" title="Advertise with us!" class="sprite ed-us">Advertise with us!</a></span>

        <div id="spnsr_list">
          <script type="text/javascript">ads_showspnrslist();</script><ul id="spnsrlist" class="bnnr-list"><li class="double"><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6195__zoneid=77__OXLCA=1__cb=1b07cfaf07__oadest=http%3A%2F%2Fwww.sitefinity.com%2Fcampaigns%2Fsandbox%2Fdrag-and-drop-responsive-grid%3Futm_source%3Dsmashing-magazine%26utm_medium%3Dbanner%26utm_campaign%3Dsmmag_grid" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(1).php" alt="Drag &amp; Drop Responsive Grid" title="Drag &amp; Drop Responsive Grid" border="0"></a><div id="beacon_1b07cfaf07" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(2).php" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6144__zoneid=24__OXLCA=1__cb=52e3aaded5__oadest=http%3A%2F%2Fwww.tidysurveys.com" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(2).php" alt="Create Your Survey in Minutes" title="Create Your Survey in Minutes" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6144__zoneid=24__OXLCA=1__cb=52e3aaded5__oadest=http%3A%2F%2Fwww.tidysurveys.com" target="_blank">Create Your Survey in Minutes</a><div id="beacon_52e3aaded5" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(3).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6175__zoneid=24__OXLCA=1__cb=50e68f593d__oadest=http%3A%2F%2Fwww.lightcms.com%2Flightcms-for-designers%3Futm_source%3DSmashing%252B%28Sponsor%29%26utm_medium%3Dbanner%26utm_content%3DLovedByDesigners%26utm_campaign%3DSmashing%26leadsource%3Dlcms_commindo_design" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(3).php" alt="Sign Up for Free!" title="Sign Up for Free!" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6175__zoneid=24__OXLCA=1__cb=50e68f593d__oadest=http%3A%2F%2Fwww.lightcms.com%2Flightcms-for-designers%3Futm_source%3DSmashing%252B%28Sponsor%29%26utm_medium%3Dbanner%26utm_content%3DLovedByDesigners%26utm_campaign%3DSmashing%26leadsource%3Dlcms_commindo_design" target="_blank">Sign Up for Free!</a><div id="beacon_50e68f593d" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(4).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><script type="text/javascript">/* <![CDATA[ */
OA_show = function (name) {
var debug = false;
if (window.location.hash == "#debug")
debug = true;
var element_hooks = {
"Sidebar 1": "wpsidebar",
"Sidebar 2": "wpsidebar",
"Sidebar 3": "wpsidebar",
"Sidebar Special": "wpsidebar",
"Medium Rectangle": "cad"
};
if (typeof(OA_output[name]) == 'undefined') {
return;
} else {
var hidden = false;
if (debug) console.log('Outputting '+name);
if (typeof element_hooks[name] !== 'undefined') {
var element = document.getElementById(element_hooks[name]);
if (element) {
var element_visible = true; // default
/*var element_display = element.currentStyle ? element.currentStyle.display : getComputedStyle(element, null).display;
if (element_display == 'none')
element_visible = false;*/
if (!(element.offsetWidth > 0) && !(element.offsetHeight > 0))
element_visible = false;
if (!element_visible) {
if (debug) console.log(element_hooks[name]+' not visible, extracting beacon');
extract_beacon(name);
}
}
}
document.write(OA_output[name]);
}
}
// In dieses Array werden die Impression-Logging-Beacons gespeichert
var OA_beacons = {};
/** Entfernt das OpenX-Impression-Logging-Beacon aus einem Banner in OA_output
*  und speichert es in der globalen Variable OA_beacons.
**/
function extract_beacon(name) {
if (OA_output[name] == undefined)
return;
var pos = OA_output[name].search(/\<div id\=\'beacon_[a-z0-9]+\'.*\<\/div\>\s*/);
if (pos != -1) {
OA_beacons[name] = OA_output[name].substr(pos);
OA_output[name] = OA_output[name].substring(0, pos);
}
}
/* ]]> */</script><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4360__zoneid=70__OXLCA=1__cb=e47866baeb__oadest=http%3A%2F%2Fw3-markup.com" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(4).php" alt="PSD to HTML" title="PSD to HTML" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4360__zoneid=70__OXLCA=1__cb=e47866baeb__oadest=http%3A%2F%2Fw3-markup.com" target="_blank">PSD to HTML</a><div id="beacon_e47866baeb" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(5).php" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5891__zoneid=24__OXLCA=1__cb=de04e05ecd__oadest=http%3A%2F%2Fwww.zoomyimages.com" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(5).php" alt="Quality Stock Images &amp; Music" title="Quality Stock Images &amp; Music" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5891__zoneid=24__OXLCA=1__cb=de04e05ecd__oadest=http%3A%2F%2Fwww.zoomyimages.com" target="_blank">Quality Stock Images &amp; Music</a><div id="beacon_de04e05ecd" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(6).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li class="double"><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6016__zoneid=77__OXLCA=1__cb=fcea574744__oadest=http%3A%2F%2Fwww.squarespace.com%2F%3Fchannel%3Ddisplay%26subchannel%3Dsmashing" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(6).php" alt="" title="" border="0"></a><div id="beacon_fcea574744" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(7).php" alt="" style="width: 0px; height: 0px;"></div>
</li><li><script src="./Essential jQuery Plugin Patterns   Smashing Coding_files/adServer.bs"></script><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/img" style="position:absolute;left:0px;top:0px;"><script src="./Essential jQuery Plugin Patterns   Smashing Coding_files/StdBanner.js"></script><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/e4e442ee-98b0-4eea-97e6-79fe9ca28e8c.jpg" id="ebStdBanner0" title="" onclick="gEbStdBanners[0].handleInteraction()" style="cursor:pointer;cursor:hand;">
<noscript>
&lt;a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5982__zoneid=24__OXLCA=1__cb=828d51d041__oadest=http%3A%2F%2Fbs.serving-sys.com%2FBurstingPipe%2FadServer.bs%3Fcn%3Dbrd%26FlightID%3D6080755%26Page%3D%26PluID%3D0%26Pos%3D9258" target="_blank"&gt;&lt;img src="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=bsr&amp;FlightID=6080755&amp;Page=&amp;PluID=0&amp;Pos=9258" border=0 width=200 height=125&gt;&lt;/a&gt;
</noscript>
<br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5982__zoneid=24__OXLCA=1__cb=828d51d041__oadest=http%3A%2F%2Fbs.serving-sys.com%2FBurstingPipe%2FadServer.bs%3Fcn%3Dbrd%26FlightID%3D6080749%26Page%3D%26PluID%3D0%26Pos%3D6429" target="_blank">Create free stunning sites!</a><div id="beacon_828d51d041" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(8).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6193__zoneid=24__OXLCA=1__cb=b95806c9da__oadest=http%3A%2F%2Fwww.zoho.com%2Fprojects%2Flp%2Fproject-management-and-collaboration.html" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(7).php" alt="Online Project Management" title="Online Project Management" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6193__zoneid=24__OXLCA=1__cb=b95806c9da__oadest=http%3A%2F%2Fwww.zoho.com%2Fprojects%2Flp%2Fproject-management-and-collaboration.html" target="_blank">Online Project Management</a><div id="beacon_b95806c9da" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(9).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6187__zoneid=24__OXLCA=1__cb=18c0deeec2__oadest=http%3A%2F%2Fwww.vectorstock.com%2Froyalty-free-vectors%3FSM%3D2" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(8).php" alt="Free + Royalty Free Vector Art" title="Free + Royalty Free Vector Art" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6187__zoneid=24__OXLCA=1__cb=18c0deeec2__oadest=http%3A%2F%2Fwww.vectorstock.com%2Froyalty-free-vectors%3FSM%3D2" target="_blank">Free + Royalty Free Vector Art</a><div id="beacon_18c0deeec2" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(10).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6135__zoneid=24__OXLCA=1__cb=a06ff4ae85__oadest=http%3A%2F%2Fwww.Bugherd.com%2F%3Futm_source%3DSmashingMag%26utm_medium%3Dbanner%26utm_content%3Dad2%26utm_campaign%3Dsmashing" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(9).php" alt="BugHerd == Happy Clients" title="BugHerd == Happy Clients" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6135__zoneid=24__OXLCA=1__cb=a06ff4ae85__oadest=http%3A%2F%2Fwww.Bugherd.com%2F%3Futm_source%3DSmashingMag%26utm_medium%3Dbanner%26utm_content%3Dad2%26utm_campaign%3Dsmashing" target="_blank">BugHerd == Happy Clients</a><div id="beacon_a06ff4ae85" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(11).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=2877__zoneid=24__OXLCA=1__cb=766872f1dd__oadest=http%3A%2F%2Fwww.dreamtemplate.com%2F%3Fref%3Dsm" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(10).php" alt="Premium Web Templates" title="Premium Web Templates" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=2877__zoneid=24__OXLCA=1__cb=766872f1dd__oadest=http%3A%2F%2Fwww.dreamtemplate.com%2F%3Fref%3Dsm" target="_blank">Premium Web Templates</a><div id="beacon_766872f1dd" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(12).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4588__zoneid=24__OXLCA=1__cb=98e2487ad8__oadest=http%3A%2F%2Fmarkup-service.com%2F" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(11).php" alt="" title="" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4588__zoneid=24__OXLCA=1__cb=98e2487ad8__oadest=http%3A%2F%2Fmarkup-service.com%2F" target="_blank">PSD to HTML5/CSS3</a><div id="beacon_98e2487ad8" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(13).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5182__zoneid=24__OXLCA=1__cb=ca51c5fa59__oadest=http%3A%2F%2Fwww.typekit.com%2F%3Futm_source%3Dsmashingmagazine%26utm_medium%3DDisplay%26utm_content%3Dshwf120515%26utm_campaign%3DGeneral" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(12).php" alt="Web fonts with Typekit" title="Web fonts with Typekit" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5182__zoneid=24__OXLCA=1__cb=ca51c5fa59__oadest=http%3A%2F%2Fwww.typekit.com%2F%3Futm_source%3Dsmashingmagazine%26utm_medium%3DDisplay%26utm_content%3Dshwf120515%26utm_campaign%3DGeneral" target="_blank">Web fonts with Typekit</a><div id="beacon_ca51c5fa59" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(14).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5976__zoneid=24__OXLCA=1__cb=f41da9094b__oadest=http%3A%2F%2Fwww.freshbooks.com%2Fsmashingmag%2F%3Fref%3D9823%26utm_source%3Ddirect%26utm_medium%3Dbanner%26utm_content%3D200x125-static-tryitfree%26utm_campaign%3Dsmashingmag" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(13).php" alt="Invoice like a pro" title="Invoice like a pro" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5976__zoneid=24__OXLCA=1__cb=f41da9094b__oadest=http%3A%2F%2Fwww.freshbooks.com%2Fsmashingmag%2F%3Fref%3D9823%26utm_source%3Ddirect%26utm_medium%3Dbanner%26utm_content%3D200x125-static-tryitfree%26utm_campaign%3Dsmashingmag" target="_blank">Invoice like a pro</a><div id="beacon_f41da9094b" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(15).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6147__zoneid=24__OXLCA=1__cb=b4006cea02__oadest=http%3A%2F%2Fwww.stickermule.com%3Futm_campaign%3DSmashing_Branded%26utm_medium%3DBanner%26utm_source%3DSmashing_Mag" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(14).php" alt="Custom Stickers" title="Custom Stickers" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6147__zoneid=24__OXLCA=1__cb=b4006cea02__oadest=http%3A%2F%2Fwww.stickermule.com%3Futm_campaign%3DSmashing_Branded%26utm_medium%3DBanner%26utm_source%3DSmashing_Mag" target="_blank">Custom Stickers</a><div id="beacon_b4006cea02" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(16).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5753__zoneid=24__OXLCA=1__cb=1dbc205a5e__oadest=http%3A%2F%2Fwww.psd2html.com%2F%3Futm_source%3Dsmashingmagazine.com%26utm_medium%3Dbanner%26utm_campaign%3Dnew-p2h" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(15).php" alt="PSD2HTML.com" title="PSD2HTML.com" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5753__zoneid=24__OXLCA=1__cb=1dbc205a5e__oadest=http%3A%2F%2Fwww.psd2html.com%2F%3Futm_source%3Dsmashingmagazine.com%26utm_medium%3Dbanner%26utm_campaign%3Dnew-p2h" target="_blank">PSD2HTML.com</a><div id="beacon_1dbc205a5e" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(17).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li></ul>
        </div><!-- /#spnsr_list -->


			</div><!-- /.ed.spnsrlistwrapper -->
			
      <div class="inner">
				
        <div class="sidebartabs">
          
          <div id="jobs" class="smashingwidget">
            
            <h3><a href="http://jobs.smashingmagazine.com/?pk_campaign=sm&piwik_kwd=widget" style="border: none;"><span>Smashing Job Board</span><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/sm-jobs.png" alt="Smashing Jobs"></a></h3>
            
            <ul class="topiclist">
              <li style="display:none;"></li>
              <li class="clearfix"><a href="http://feedproxy.google.com/~r/smjobs/~3/-p58hwils_s/2403524">Web Developer/Designer - FEGS Health and Human Services - (New York City) - FullTime</a><p>Award-winning media/communications department of a major New York City nonprofit social services agency seeks a team player – creative, energetic, professional…</p></li><li class="clearfix"><a href="http://feedproxy.google.com/~r/smjobs/~3/5XfNzRu32Sk/2403508">Web Designer - IBrand LLC - (Calabasas, CA) - FullTime</a><p>IBrand, LLC is an internet marketing company looking for an experienced Graphic/Web Designer. Ideal candidate will be able to convert original visual design concepts…</p></li>            </ul>
            
            <p class="view-more"><a href="http://jobs.smashingmagazine.com/?pk_campaign=sm&piwik_kwd=widget">View more job openings…</a></p>
          </div><!-- /#jobs -->

        </div><!-- /.sidebartabs -->

        <div id="sidebar_special">
          
	        <script type="text/javascript">OA_show('Sidebar Special');</script><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6181__zoneid=72__OXLCA=1__cb=2698524337__oadest=http%3A%2F%2Fwww.lightcms.com%2Flightcms-for-designers%3Futm_source%3DSmashing%252B%28420x200%29%26utm_medium%3Dbanner%26utm_content%3DLovedByDesigners%26utm_campaign%3DSmashing%26leadsource%3Dlcms_commindo_design" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(16).php" alt="" title="" border="0"></a><div id="beacon_2698524337" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(18).php" alt="" style="width: 0px; height: 0px;"></div>

	 
        </div>

			</div><!-- /.inner -->
	    
      <div class="two clearfix">
  			<div class="left">	
          <!--<div id="sidebaredtarget">-->
          
          <div class="sidebar_sky">
		            <script type="text/javascript">OA_show('Sidebar 1');</script><!--<span class="declare">Advertisement</span>-->
<div style="height:20px;"></div><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6172__zoneid=40__OXLCA=1__cb=7d5d11cb5d__oadest=http%3A%2F%2Fwww.lightcms.com%2Flightcms-for-designers%3Futm_source%3DSmashing%252B%28Sidebar%29%26utm_medium%3Dbanner%26utm_content%3DHTML-Green%26utm_campaign%3DSmashing%26leadsource%3Dlcms_commindo_design" target="_blank" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/ai(17).php" alt="" title="" border="0"></a><div id="beacon_7d5d11cb5d" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lg(19).php" alt="" style="width: 0px; height: 0px;"></div>

		          </div><!-- /.ed.sidebared -->
          
          <!-- </div> -->

          <div class="sidebar_sky">
		            <script type="text/javascript">OA_show('Sidebar 2');</script>
		          </div>
        </div><!-- /.left -->
	    </div><!-- /.two -->
			
		</div><!-- .col.ads -->
	</div>

<div id="footer">
<div class="contribute"><div class="product clearfix"><div class="product-image">
<a href="https://shop.smashingmagazine.com/smashing-book-4.html?pk_campaign=smashingmagazine-footer" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/footer-smb4-coding-opt.png" alt="Smashing Book #4"></a>
</div>
<div class="product-description"><p><a href="https://shop.smashingmagazine.com/smashing-book-4.html?pk_campaign=smashingmagazine-footer"><strong>The Smashing Book #4</strong></a><br>Pre-order our brand new Smashing Book #4, available as print and eBook. <a href="https://shop.smashingmagazine.com/smashing-book-4.html?pk_campaign=smashingmagazine-footer">Learn more...</a></p>
</div></div></div>

<div class="contribute"><div class="product clearfix"><div class="product-image">
<a href="https://shop.smashingmagazine.com/smashing-library-complete.html?pk_campaign=smashingmagazine-footer" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/library-footer-image-opt.png" alt="The Smashing Library"></a>
</div>
<div class="product-description"><p><a href="https://shop.smashingmagazine.com/smashing-library-complete.html?pk_campaign=smashingmagazine-footer"><strong>The Smashing Library</strong></a><br>Grab all published and upcoming Smashing eBooks, in one swoop. <a href="https://shop.smashingmagazine.com/smashing-library-complete.html?pk_campaign=smashingmagazine-footer">Learn more...</a></p>
</div></div></div>

<div class="contribute"><div class="product clearfix"><div class="product-image">
<a href="https://shop.smashingmagazine.com/workshops/?pk_campaign=smashingmagazine-footer" style="border: none;"><img src="./Essential jQuery Plugin Patterns   Smashing Coding_files/lea-verou-opt1.jpg" alt="Smashing Workshops"></a>
</div>
<div class="product-description"><p><a href="https://shop.smashingmagazine.com/workshops/?pk_campaign=smashingmagazine-footer"><strong>Smashing Workshops</strong></a><br>Join our hands-on full-day workshops, run by experts of the industry. Good stuff. <a href="https://shop.smashingmagazine.com/workshops/?pk_campaign=smashingmagazine-footer">Learn more...</a></p>
</div></div></div>

<p class="statement"><em>With a commitment to quality content for the design community.</em><br><a href="http://www.smashing-media.com/">A Smashing Media Company.</a> Made in Germany. 2006-2013. <a href="http://www.smashingmagazine.com/contact/">Contact Us.</a> <a href="http://www.smashingmagazine.com/about/">Impressum.</a></p>
</div><!-- End of Footer -->

<script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/footer.combined.min.js"></script>
<script type="text/javascript" src="./Essential jQuery Plugin Patterns   Smashing Coding_files/prism.js"></script>

    <script src="./Essential jQuery Plugin Patterns   Smashing Coding_files/js" type="text/javascript"></script>
    <script type="text/javascript">
        try{ clicky.init(66569468); }catch(e){}
    </script>
<script type="text/javascript">
setTimeout(function(){var a=document.createElement("script");
var b=document.getElementsByTagName('script')[0];
a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0011/1125.js";
a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
</script><!--<script type='text/javascript' async="" src='https://platform.twitter.com/widgets.js'></script>-->


</body></html>